Webpack
是一个模块打包器,将有依赖关系的资源通过 webpack 打包生成独立的静态资源
概念
- entry (入口)
- output (出口)
- loader (主要用于打包非 js/json 资源)
- 插件
使用
-
生成 package.json
$ npm init -y
-
本地安装 webpack 和 webpack-cli
$ npm install webpack webpack-cli --save-dev
-
创建 src 目录,在 src 目录中添加 index.js 文件
console.log('index,这是首页中的 index.js 文件')
-
创建 dist 目录,在 dist 目录中添加 index.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> </head> <body> 这是首页内容 <script src="main.js"></script> </body> </html>
-
修改 package.json 的 scripts 字段,添加:
{ ......, "scripts": { ......, "start": "webpack --mode=development" }, ...... }
-
执行 start 脚本,在 dist 目录下会生成 main.js 文件
$ npm start
-
查看页面效果
默认情况下, webpack 的入口文件是
./src/index.js
,出口文件为./dist/main.js
-
如果需要更灵活的配置,在项目根目录下,创建 webpack.config.js 文件:
const path = require('path') module.exports = { entry: './src/home.js', // 入口 output: { // 出口 path: path.join(__dirname, './dist'), filename: 'home.js' } }
-
多入口 webpack 配置:
const path = require('path') module.exports = { entry: { main: './src/home.js', login: './src/login.js' }, output: { path: path.join(__dirname, './dist'), filename: '[name].[chunkHash].js' } }
-
使用
html-webpack-plugin
插件生成 html 文件$ npm i html-webpack-plugin --save-dev
配置文件 webpack.config.js 中添加:
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: '...', output: { ... }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
-
打包 css,安装
style-loader
和css-loader
:$ npm i style-loader css-loader --save-dev
配置:
//这里是js文件eg:index.js import './style.css' import './index.scss' ... console.log(11)
module.exports = { ..., module: { rules: [ { test: /\.css$/i, use: [ 'style-loader', 'css-loader' ], }, ], }, }
使用 style-loader 会将打包的 css 插入到页面
<head>
头部生成<style>
标签内容,如果希望还是生成独立的外部 css 文件,可以使用 mini-css-extract-plugin 插件。 -
安装 mini-css-extract-plugin 生成外部独立 css 文件:
npm i mini-css-extract-plugin --save-dev
配置:
const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { ..., plugins: [ ......, new MiniCssExtractPlugin({ filename: 'css/[name].[chunkHash].css' }) ], module: { rules: [ { test: /\.css$/i, use: [ // 'style-loader', MiniCssExtractPlugin.loader, 'css-loader' ], }, ], }, }
-
安装 sass-loader 来编译 *.scss 的文件
$ npm i sass-loader node-sass --save-dev
配置:
module.exports = { ..., module: { rules: [ ..., { test: /\.scss$/i, use: [ MiniCssExtractPlugin.loader, "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS, using Node Sass by default ] } ] } }
-
安装 less-loader 来编译 *.less 的文件
$ npm i less-loader less --save-dev
配置:
module.exports = { ..., module: { rules: [ ..., { test: /\.less$/i, use: [ MiniCssExtractPlugin.loader, "css-loader", // translates CSS into CommonJS "less-loader" // compiles Sass to CSS, using Node Sass by default ] } ] } }
-
css 前缀:postcss-loader、autoprefixer、browserslist
-
图像处理:file-loader、url-loader
-
拷贝文件:copy-webpack-plugin
-
babel 转换,安装 babel-loader:
$ npm i babel-loader @babel/core @babel/preset-env --save-dev
配置:
{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }
-
webserver 服务器:webpack-dev-server
安装:
$ npm i webpack-dev-server --save-dev
配置 package.json:
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=production --config=webpack.dev.config.js", "dev": "webpack-dev-server --mode=development --config=webpack.dev.config.js", "start": "npm run dev" } }