webpack安装

1.安装webpack依赖

npm init    //初始化，创建package.js
npm install --save-dev webpack    //在项目中安装依赖包
npm install -g webpack    //全局安装

2.回到原文件夹，创建两个文件夹，src存放源文件，dist存放打包后的js文件（供浏览器读取），创建index.html

项目结构.png

src里创建script及style两个文件夹，用于存放脚本及样式。
script里创建main.js(作为文件入口)。

3.配置文件

回到原文件夹，创建webpack.config.js

module.exports={
    entry: __dirname + '/src/script/main.js'，//文件入口，最好使用绝对路径
    output:{
        path: __dirname + '/dist/js',    //打包后文件存放的地方
        filename:'bundle.js'      //打包后的文件名
     // filename:'bundle-[hash].js'     //亦可添加hash值到打包文件中(避免缓存)
    }
}

注：“__dirname”是node.js中的一个全局变量，指向当前脚本所在的目录。
注：若修改默认文件名(webpack.config.js)，则需要在运行webpack时指定配置文件名，即webpack --config 修改后的文件名

4.打包

• 全局安装——只需在终端输入webpack
• 非全局安装——需执行命令node_modules/.bin/webpack

查看dist下是否生成bundle.js，以判断webpack是否生效。

webpack运行成功.jpg

• 自定义打包命令
  在package.json中对script对象进行相关设置：

"scripts": {
    "start":"webpack"
}

直接运行npm run start

注：start / stop/test 是npm特殊命令，可省略‘run’，直接执行npm start / npm stop / npm test即可。

webpack参数其他配置

package.json文件
“script”:{
      "webpack":"webpack --config webpacke.config.js --progress//打包过程 --display-module//打包模块 --colors//打包字彩色 --display-reason//打包原因"
}

多个入口配置

module.exports={
    entry:{
          main:__dirname + '/src/script/main.js',
          a:__dirname + '/src/script/a.js'
    }
    output:{
        path: __dirname + '/dist/js',    
        filename:'[name]-[hash].js'
     // filename:'[name]-[chunkhash].js' //MD5算法,确保每个文件的版本号不同
    }
}
//输出：  ./dist/js/main.js , ./dist/js/a.js