内容简介:总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细,略长, 后续结束时候我们给出源码文件。然后通过或者配成一个script命令也可以。
总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细,略长, 后续结束时候我们给出源码文件。
准备开发环境
- 安装node - 安装webpack - npm init 初始化项目 复制代码
目录结构
写跑一个小demo
// src/index.js import _ from 'lodash' function create_div_element () { const div_element = document.createElement('div') div_element.innerHTML = _.join(['kobe', 'cpul'], ' ') return div_element } const div_ele = create_div_element() document.body.appendChild(div_ele) 复制代码
// dist/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack4</title> </head> <body> <script src="./bound.js"></script> </body> </html> 复制代码
// webpack.config.js const path = require('path') module.exports = { entry: './src/index.js', mode: 'development', output: { filename: 'bound.js', path: path.resolve(__dirname, 'dist') } } 复制代码
然后通过 npx 执行webpack进行打包。
或者配成一个script命令也可以。
"scripts": { "build": "npx webpack -c webpack.config.js" } 复制代码
npx webpack 复制代码
在浏览器打开index.html就会发现代码执行成功了。
webpack处理CSS
假设我们现在需要在index.js引入css文件。
// index.js import './style/reset.css' 复制代码
我们需要使用专门的loader来解析css, 并把css注入到html文件
npm i -D css-loader style-loader 复制代码
修改webpack配置文件
const path = require('path') module.exports = { entry: './src/index.js', mode: 'development', output: { filename: 'bound.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css/, use: ['style-loader', 'css-loader'] // use的顺序从右往左 } ] } } 复制代码
这个时候你在npx webpack, 打包后执行index.html你会发现css已经注入成功了。
webpack处理sass文件
现在前端项目都是使用一些css预处理器来帮助更好的使用CSS,如Sass等。
假设我们现在index.js中需要引入一个base.scss文件。 那么webpack改如何处理sass/scss文件呢?
npm install sass-loader node-sass -D 复制代码
// src/style/base.scss $bd-bg: pink; body { background: $bd-bg; } 复制代码
// index.js import './style/base.scss' 复制代码
更过配置文件处理scss
const path = require('path') module.exports = { entry: './src/index.js', mode: 'development', output: { filename: 'bound.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(sc|sa|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] // use的顺序从右往左 } ] } } 复制代码
webpack为sass添加source map
配置source map是为了当出现错误时候方便我们进行定位调试, 当然我们在生产环境不需要启动这个。
像我们上面例子中, 你会发现打包后我们看不出scss来自哪个文件。
修改webpack配置文件。
const path = require('path') module.exports = { entry: './src/index.js', mode: 'development', output: { filename: 'bound.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(sc|sa|c)ss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } } ] } ] } } 复制代码
打包后在浏览器打开index.html.
webpack为css添加CSS3前缀
PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具, 功能强大, 我们最常用的就是利用PostCSS帮我们Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自动为 CSS 规则添加前缀。
npm i -D postcss-loader autoprefixer postcss-import // postcss-import: 在使用@import css文件时候让webpack可以监听并编译 // postcss-nextcss: 支持css4 复制代码
修改配置文件
rules: [ { test: /\.(sc|sa|c)ss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader => [ // 可以配置多个插件 require('autoprefixer')({ browsers: [' > 0.15% in CN '] }) ] } }, { loader: 'sass-loader', options: { sourceMap: true } } ] } ] 复制代码
抽离样式表为单独的css文件并打版本号
抽离css前提是我们只在生产环境这么做, 因此你的配置文件的mode: production。
另外抽离了css就不能在使用style-loader注入到html文件。
npm i -D mini-css-extract-plugin 复制代码
配置一个script命名
"scripts": { "dist": "cross-env NODE_ENV=production npx webpack --progress --config webpack.prod.config.js" }, 复制代码
添加一个webpack.prod.config.js.当然正式项目我们是会拆分配置文件, 然后通过merge处理。
- webpack.base.config.js - webpack.dev.config.js - webpack.prod.config.js - webpack.vue.config.js 复制代码
这里demo就没有这么做, 所以代码有些冗余。
// webpack.prod.config.js const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const devMode = process.env.NODE_ENV !== 'production' module.exports = { entry: './src/index.js', mode: 'production', output: { filename: 'bound.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(sc|sa|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ require('autoprefixer')({ browsers: [ 'last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8' ] }) ] } }, { loader: 'sass-loader' } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: devMode ? '[name].css' : '[name].[hash:5].css', // 设置输出的文件名 chunkFilename: devMode ? '[id].css': '[id].[hash:5].css' }) ] } 复制代码
打包后你会发现
这个时候我们如果去使用只能在index.html去引用它了, 很明显这是不方便的, 因为我们css文件肯定很庞大, 后面会解决这个问题, 这里就略过。
webpack压缩JS和CSS
压缩的作用自然是为了减小包的体积了, 提升加载效率, 因此压缩都是配置在生产环境。
压缩css
Webpack后面版本应该会内置CSS压缩, 目前先手工配置。
npm i -D optimize-css-assets-webpack-plugin 复制代码
更改配置文件:
const OptimizeCSSAssertsPlugin = require('optimize-css-assets-webpack-plugin') optimization: { minimizer: [ // 压缩CSS new OptimizeCSSAssertsPlugin({}) ] } 复制代码
JS压缩
npm i -D uglifyjs-webpack-plugin 复制代码
修改配置文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') optimization: { minimizer: [ // 压缩JS new UglifyJsPlugin({ // 有很多可以配置 cache: true, parallel: true, sourceMap: true, uglifyOptions: { // 在UglifyJs删除没有用到的代码时不输出警告 warnings: false, output: { // 删除所有的注释 comments: false, // 最紧凑的输出 beautify: false }, compress: { // 删除所有的 `console` 语句 // 还可以兼容ie浏览器 drop_console: true, // 内嵌定义了但是只用到一次的变量 collapse_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值 reduce_vars: true, } } }) ] } 复制代码
这个时候去打包我发现一个错误, ERROR in js/background.js from UglifyJs Unexpected token: keyword (const) 。
Uglify-js不支持es6语法,请使用terser插件, 于是我们更改使用terser插件试试, 其实你继续用uglifyjs-webpack-plugin也可以, 只需要配合babel先转下。
npm install terser-webpack-plugin -D 复制代码
更多使用见官网 terser-webpack-plugin 。
optimization: { minimizer: [ // 压缩JS new TerserPlugin({ cache: true, parallel: true, sourceMap: true, // 等等详细配置见官网 }), ] } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 合格的配置中心应有的素养
- 代码整洁之道——程序员的职业素养
- 成为一名安全资深工程师应该具备怎样的素养!
- 《代码整洁之道》和《程序员的职业素养》读书笔记
- 一个合格的Webpack4配置工程师素养:第三部分
- 一个合格的Webpack4配置工程师素养:第二部分
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
WEBMASTER技术手册
斯潘奥尔 / 斯潘奥尔 / 清华大学出版社 / 2004-4 / 63.0
本书的第三版升级到Apache PHP和Java Script 最新的版本上。同是它还包含了关于mod_perl更为详尽的信息以及提高Web 性能的方法。书中的内容涉及到HTML4.01、CSS、XML和XSLT、JavaScript1.5 、HTTP1.1、A pache2.0等等。一起来看看 《WEBMASTER技术手册》 这本书的介绍吧!