webpack安装

   webpack安装

（先安装nodejs, NPM是随同NodeJS一起安装的包管理工具）

第一：进入项目文件夹，按shift键和鼠标右键，进入power shell窗口

第二：初始化，npm init -y

第三：本地安装，npm install webpack --save-dev （--save-dev

项目上线不需要的环境依赖，写入到 devDependencies 对象）

第四：安装插件babel-loader，npm install babel-loader babel-core -D，然后再安装npm install babel-preset-es2015 babel-plugin-transform-runtime -D。（-D是--save-dev的简写）

注：babel：语法转化器（只转化关键字）

babel-core：核心包

babel-loader：babel与webpack结合就使用babel-loader

babel-preset-es2015：提供预设（转化为ES5）

babel-plugin-transform-runtime：转化ES6函数

第五：安装css模块插件

npm install css-loader style-loader  autoprefixer-loader -D

注：css-loader：核心包

style-loader：生成script标签并插入

autoprefixer-loader：添加前缀（解决兼容性问题）

第六：less模块（不需要可以不装，需要装）

npm install less less-loader -D

第七：配置webpack.config.js文件，放在.jason配置文件的同级目录下。

const path=require('path')

module.exports = {

    // 打包main.js，打包后的文件输出到dist目录中，起名为build.js

    entry: './src/main.js',

    output: {

       path: path.resolve(__dirname, './dist/'),

       filename: 'build.js'

    },

   

    // 配置不同类型文件模块的加载

    module: {

       rules: [

           // 配置css文件模块，让css-loader那css文件打包到js中，再用style-loader让样式生效

           {

              test: /\.css$/,

              use: [

                  'style-loader',

                  'css-loader' 

              ]

           },

           // 配置less文件模块

           {

              test: /\.less$/,

              use: [

                  'style-loader',

                  'css-loader',

                  'less-loader'

              ]

           },

          

           // 配置解析es6为es5

           {

              test: /\.js$/,

              use: [

                  {

                     loader: 'babel-loader',

                     options: {

                         // 配置要解析的语法规范

                         presets: ['es2015'],

                         // babel-loader的依赖，不引入部分es6代码可能会解析错误

                         plugins: ['transform-runtime']

                     }

                  }

              ],

              // 排除掉这里的js模块，不然webpack解析他们，提高打包速度

              exclude: /node_modules/

           }

       ]

    }

};

 

 

配置完以上之后可以直接执行webpack指令（新版的执行webpack指令后会提示你装webpack-cli，转完webpack-cli后，进入.bin文件夹下，power shell窗口执行webpack-cli命令。如果不想每次都进入.bin文件夹下也可以先把.bin的路径添加到系统的环境变量里，然后就可以进入项目文件夹里，进入power shell窗口执行webpack-cli命令。