二、配置webpack 以及配置参数功能

1.      新建目录mkdir webpack-demo;

2.      用npm初始化目录 npm init;

3.      安装webpack: npm install webpack –save-dev;

4.      建一些文件夹供项目使用;

    mkdir src => 项目源文件
    mkdir dist =>静态资源

5.      给项目webpack-demo新建一个初始化页面index.html;引入打包后的文件(假设是bundle.js)

6.      在src目录下新建文件夹script(脚本),style(样式);

7.      给项目建立一个配置文件;webpack.config.js (如果我们直接执行命令webpack ,他会在项目根目录下找这个文件作为默认配置,当然可以通过--config option 来指定其他的配置文件);官网 => API => configuration

8.      使用webpack --help 查看命令

9.      webpack.config.js 内容:

  module.exports={       //commonJs模块化的输出

        entry:’打包的入口’,

        output:{       

               path:’ 打包以后放在什么地方’,

               filename:’打包以后的文件名’

        }

  }

   

  这是一个最简单的webpack 的配置;运行webpack ,文件被打包好了;

 

       —*—参数:参数可以写在npm的脚本里 package.json => scripts

   

  

  ***注:package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。

   *** npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build

10.  参数:

  --entry的三种方式:

  1).string

  2)  .array      entry: ["./entry1", "./entry2"]

  3)  .object     多页面应用

  entry: {

        page1: "./page1",

        page2: ["./entry1", "./entry2"]

     }

     

   

  

  --output:多个entry的时候使用占位符;

   

  [name] is replaced by the name of the chunk.

   [hash] is replaced by the hash of the compilation.本次打包的hash

   [chunkhash] is replaced by the hash of the chunk.文件的版本号,md5值,保证文件的唯一性;文件修改才会改变;

   {

    entry: {

      app: './src/app.js',

      search: './src/search.js'

    },

    output: {

      filename: '[name].js',

      path: __dirname + '/build'

    }

  }

 

posted @ 2017-04-28 17:24  xiangcy  阅读(2191)  评论(0编辑  收藏  举报