一、基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webpack-cli
Npm 5.2以上的版本中提供了一个npx命令
npx想要解决的主要问题、就是调用项目内部安装的模块、即就是在node_modules下的.bin目录中找到对应的命令执行
使用webpack命令: npx webpack
Webpack4.0之后可以实现0配置打包构建、0配置的特点就是限制较多、无法自定义很多配置
开发过程中还是使用webpack配置进行打包构建
2.2 webpack配置Webpack 四大核心概念
入口entry — 程序的入口js
输出 output — 打包后存放的位置
加载器loader — 用于对模块的源代码进行转换
插件plugins — 解决loader无法解决的问题
基本配置
配置 webpack.comfig.js
运行 npx webpack
// 运行默认webpack.config.js文件 npx webpack npx webpack webpack.config.js // 运行自定义配置文件 npx webpack --config webpack.custom.config.js //package.json 配置 "dev": "webpack --config webpack.custom.config.js", "dev1": "npx webpack --config webpack.custom.config.js", // npx 可省略、会自动在node_modules里面找 "dev2": "webpack" const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename:'bundle.js' }, mode: 'development' } 2.3 自动编译工具配置每次要编译代码时，需要运行npm run dev比较烦，webpack提供了几个选项、可以自动编译
webpack watch mode
webpack-dev-server
webpack-dev-middleware
多数场景中、推荐使用webpack-dev-server
2.3.1 watch在webpack指令后面加上--watch参数即可
主要的作用就是监视本地项目文件的变化、发现有修改的代码就会自动编译打包、生成输出文件
通过cli的方式设置watch参数
配置package.json
"watch": "webpack --watch"运行 npm run watch
通过配置文件对watch的参数进行修改
const path = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename:'bundle.js' }, // 开启监视模式、此时执行webpack指令进行打包会监视文件变化自动打包 watch: true } 2.3.2webpack-dev-server (重点)简单配置
安装devServer
安装devServer需要依赖webpack、必须在项目依赖中安装webpack
npm i -D webpack-dev-server
index.html中
<script src='http://www.likecs.com/bundle.js'></script>
运行
npx webpack-dev-server
运行
npx webpack-dev-server --hot --open --port 9527
配置package.json
"dev": "webpack-dev-server --contentBase src --compress --hot --open --port 9527" // --contentBase src 是以src为根目录， 否则以项目为根目录 // --open 自动打开 // --port 端口号 // --hot 热模块更新 // --compress 利用express开启gzip压缩
运行
npm run devdevServer 会在内存中生成一个大包好的bundle.js， 专供开发时使用，打包效率高，修改代码后会自动打包重新打包以及刷新浏览器
修改webpack.config.js
const path = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename:'bundle.js' }, // 将cli中的参数 在配置文件中进行配置 devServer:{ hot:true, open: true, port:9527, compress: true, contentBase:'./src' } } 2.3.3 html插件
安装 html-webpack-plugin 插件
npm i -D html-webpack-plugin
在 webpack.config.js 中 plugins 节点下配置
const HtmlWebpackPlugin = require('html-webpack-plugin') plugins:[ new HtmlWebpackplugin({ filename: 'index.html', // 生产的文件名称 template: './src/index.html' // 将此目录下的文件作为模板生成一个新的html、放置在根目录的内存中 }) ]devServer时、根据模板在express项目根目录下生成html文件、类似于devServer生成内存中的bundle.js
devServer时、自动引入 bundle.js
打包时会自动生成index.html
2.3.4 webpack-dev-middlewarewebpack-dev-middleware 是一个容器(wrapper)、它可以把webpack处理后的文件传递给一个服务器(server)、webpack-dev-server 在内部使用了它、同时、它可以作为一个单独的包来使用、以便进行更多自定义设置来实现更多的需求
安装express 和 webpack-dev-middleware
npm i -D express webpack-dev-middleware
新建 server.js
const express = require('express') const webpack = require('webpack') const webpackDevMiddleware = require('webpack-dev-middleware') const config = require('./webpack.config') const app = express() const compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { publicPath:'http://www.likecs.com/' })) app.listen(3333, function () { console.log('port:3333'); })如果要使用middleware、必须使用html-webpack-plugin插件、否则html文件无法正确的输出到express服务器的根目录
2.3.5 总结只有在开发时才需要使用自动编译工具
项目上线时都会直接使用webpack进行打包构建、不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验
2.4处理CSS
安装 css-loader style-loader
npm i -D css-loader style-loader