webpack学习笔记
目录:
1. 创建package.json
创建一个package.json文件,使用 npm init
命令可以自动创建。(注:使用npm命令需先安装Node.js)
npm init
初始化的package.json:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "name": "libing.webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
2. 安装webpack
全局安装:
npm install -g webpack
本地安装(安装到项目目录):
npm install -D webpack
npm install --save-dev webpack
npm install -S module_name:即 npm install module_name --save,写入dependencies。
npm install -D module_name:即 npm install module_name --save-dev,写入devDependencies。
npm install -g module_name:全局安装(命令行使用)
npm install module_name:本地安装(将安装包放在 ./node_modules)
dependencies与devDependencies区别:
◊ devDependencies中的插件:只用于开发环境,不用于生产环境。
◊ dependencies中的插件:需要发布到生产环境。
查看webpack安装版本:
# webpack全局安装 webpack --version
# webpack非全局安装 node_modules/.bin/webpack --version
安装webpack-cli:
npm install -D webpack-cli
npm install -D webpack webpack-cli
3. webpack.config.js
在项目的根目录下创建webpack.config.js,最基础的配置:
const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } };
其中,
entry:webpack入口起点,指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
output:指示 webpack 在哪里输出所创建的 bundles,以及如何命名这些文件。
在package.json文件中添加:
"scripts": { "start": "webpack" },
运行命令:
npm start
注:npm中start是一个特殊的脚本名称,在命令行中使用npm start就可以执行其对于的命令。
如果对应的脚本名称不是start,在命令行中运行需要npm run {script name},如:npm run build
生成文件结构:
若不修改package.json,运行打包方式:
node_modules/.bin/webpack
4. webpack-dev-server
安装webpack-dev-server:
npm install -D webpack-dev-server
package.json增加:
"scripts": { "dev": "webpack-dev-server" },
webpack.config.js:
var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js' }, devServer: { port: 9000, inline: true, open: true } };
5. Plugins
5.1 html-webpack-plugin
html-webpack-plugin插件作用:
(1)创建HTML入口文件;
(2)为HTML文件添加引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存。
安装html-webpack-plugin:
npm install -D html-webpack-plugin
webpack.config.js:
var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin() // 默认配置,创建一个HTML入口文件。 ] };
以上配置打包之后,会在dist文件夹中创建index.html入口文件。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="bundle.js"></script> </body> </html>
html-webpack-plugin常用配置:
var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ title: 'Libing.Vue', minify: { removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 removeRedundantAttributes: true, //删除多余的属性 }, template: 'index.html', inject: 'head' }) ] };
title:生成html文件的标题
template:指定的模板文件来生成特定的 html 文件
inject:注入选项。有四个选项值 true, body, head, false。
true:默认值,script标签位于html文件的 body 底部
body:script标签位于html文件的 body 底部(同 true)
head:script 标签位于 head 标签内
false:不插入生成的 js 文件,只是单纯的生成一个 html 文件
5.2 clean-webpack-plugin
安装clean-webpack-plugin:
npm install -D clean-webpack-plugin
webpack.config.js:
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { mode: 'production', entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), filename: 'bundle-[hash].js' }, plugins: [ new CleanWebpackPlugin() ] };