webpack安装 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值到打包文件中(避免缓存) } }

【webpack安装】注：“__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