版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
使用webpack前提：已经安装npm（安装node.js已经包含npm）
1.安装webpack
使用webstorm打开工程文件夹，在命令行工具中输入
npm init -y //初始化npm
npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack）
【可选】：防止意外发布
我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。
[文件：package.json]
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true, //添加
- "main": "index.js", //删除
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
2.安装所依赖的库
npm install --save LibraryName （LibraryName为所依赖的库名称）
3.在js文件中导入我们的库
import $ from 'jquery'; //示例导入jquery库
这时即可使用 npx webpack 命令将index.js等文件打包到 ./dist/main.js 文件中，html文件可以引入此文件使用
4.创建webpack配置文件 webpack.config.js
[文件：webpack.config.js ]
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这是可以使用 npx webpack --config webpack.config.js 命令进行构建
5.简化构建代码
在 package.json 添加一个 npm 脚本(npm script)：
[文件 package.json]
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //添加
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
这时可以使用 npm run build 命令来进行构建
【可选】:输出多个文件
现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 bundle 名称：
[ 文件：webpack.config.js ]
扫描二维码关注公众号，回复：
7199581 查看本文章
const path = require('path');
module.exports = {
- entry: './src/index.js', //删除
+ entry: { //添加
+ app: './src/index.js', //添加
+ print: './src/print.js' //添加
+ }, //添加
output: {
- filename: 'bundle.js', //删除
+ filename: '[name].bundle.js', //添加
path: path.resolve(__dirname, 'dist')
}
};
这时仍然使用 npm run build 命令来进行构建
6.添加 inline-source-map 开发工具，显示错误位置
[文件：webpack.config.js]
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ devtool: 'inline-source-map', //添加
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这时控制台上即可输出开发中的错误信息
7.设置自动构建与浏览器的自动更新
1.自动重新编译 观察模式：webpack --watch
[文件：package.json]
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch", //添加
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
运行 npm run watch ，这时修改代码 webpack会自动重新编译构建
2.自动重新编译与浏览器的自动刷新 webpack-dev-server
1.首先安装 webpack-dev-server
npm install --save-dev webpack-dev-server
[文件：webpack.config.js ]
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: { //添加
+ contentBase: './dist' //添加
+ }, //添加
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
2.让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)：
[文件：package.json]
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --open", //添加
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码！
操作总结
1.命令行 (1.初始化 2.webpack 3.dev-server)
npm init -y //初始化npm
npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack）
npm install --save-dev webpack-dev-server //自动重新编译与浏览器的自动刷新 webpack-dev-server
npm install --save LibraryName（库名） //（自己所需的库）
npm run watch //监控文件内容改变自动编译
npm start //浏览器自动刷新
2.文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
3.文件package.json （1.watch 2.start 3. build）
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch", //添加
"start": "webpack-dev-server --open", //添加
"build": "webpack" //添加
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.0.0"
}
}
注意：不要忘记html引入已经编译好的文件