webpack简单使用（一）

安装

1. 安装node.js 传送门：https://nodejs.org/en/
2. 进入你的项目根目录，然后安装webpack-cli：npm install webpack-cli -D
3. 安装webpack：npm install webpack

打包

1. 在项目根目录新建文件 webpack.config.js；
2. 加入如下代码：

   let path = require('path');//引入path库
   module.exports = {
       entry : './src/main.js',//需要被打包的入口文件
       output: {
           filename: "bundle.js",//目标文件名
           path: path.resolve('./dist')//获取目标文件的路径
       }
   };

3.修改package.json 中的 scripts 项，添加 "pk":"webpack" ：

4.命令行中执行npm run pk

多入口打包

1. 同上

2. 加入如下代码：

   let path = require('path');
   module.exports = {
       entry : {
           main:'./src/main.js',
           main1:'./src/main1.js'
       },
       output: {
           filename: "[name].js",
           path: path.resolve('./dist')
       }
   };

3. 同上

4. 同上

语法转换

1. 安装babel：npm install babel-core –save-dev
2. 获得es6语法：npm install babel-preset-es2015 –save-dev (es7:babel-preset-stage-0)

3. 新建.babelrc文件，键入：

       {
     "presets": ["es2015"]//es7的话是stage-0，如此类推
   }

4. 在webpack.config.js上配置module项

   • 例：匹配所有js文件，使用babel-loader转义，排除node_modules文件夹

     module: {
            rules: [
                {test:/\.js$/, use: 'babel-loader',exclude:/node_modules/}
            ]
        }

5. 进行代码生成