好久不看 webpack 已经从 3到4了,其实很早到今年2月份就开始发布 webpack 4 的 beta 版本;
每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白,为什么 webpack又要迭代一个新的里程碑,以及带了什么新的特性; 这里简单总结下:
- Faster!!! Webpack 在 bundle bundle 的时间会缩短至少 60 个点,最高可以到 98%; (我们似乎可以节省一些时间去这些事情)
- Mode 增加了新的属性,来支持 development 和 production 的区别,从而达到更好的优化效果;
- CommonsChunkPlugin 不将启用;取而代之的新的 API optimization.splitChunks;
- WebAssembly 的支持,现在默认支持 import export 和 WebAssembly 的模块 ;
如果你是 webpack 2+ 迁移的话,相对而言成本会小一些,因为配置语法变化不大,但是如果 webpack 1 迁移的话,建议你仔细看下后面的配置变化;
安装 Webpack
首先需要更新 Webpack 的版本,我们可以重新安装 Webpack
npm i -g webpack
然后再安装一个轻量级的命令行工具
yarn add webpack webpack-cli -D
配置 babel
我们可以自己建一个目录存放 webpack 的配置, 我们暂时就叫 webpack 也行;
babel 配置
npm i babel-loader babel-core babel-preset-env --save-dev
我们在 webpack 目录下新建 loaders.js 文件;
const JSLoader = { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env'] } } }; module.exports = { JSLoader: JSLoader };
当前你也可以使用之前的方式 .babelrc 中配置插件和 preset 。
然后再 webpack/webpack.config.js 加上基本的 loader 配置
const path = require('path'); const loaders = require('./loaders'); module.exports = { entry: ["./src/js/app.js"], module: { rules: [ loaders.JSLoader ] }, output: { path: path.resolve(__dirname, "dist"), filename: "js/[name].bundle.js" }, };
添加 eslint
首先在项目里面配置 eslint:
eslint --init
配置完成后,我们需要安装 eslint-loader
npm i eslint-loader --save-dev
同理,我们可以修改 webpack/loaders.js ;
... const ESLintLoader = { test: /\.js$/, enforce: 'pre', exclude: /node_modules/, use: { loader: 'eslint-loader', options: { configFile: __dirname + '/.eslintrc' }, } }; module.exports = { JSLoader: JSLoader, ESLintLoader: ESLintLoader, };
然后再 webpack/webpack.config.js 中修改
module.exports = { ... module: { rules: [ loaders.JSLoader, loaders.ESLintLoader ] }, ... };
处理 sass/less
接下来我们看下如何处理 sass 或者 less ,代码例子以 sass 为例子;
复制代码 代码如下:npm i node-sass css-loader stylelint stylelint-webpack-plugin optimize-css-assets-webpack-plugin postcss postcss-preset-env postcss-loader cssnano sass-loader mini-css-extract-plugin --save-dev
其中几个插件需要简单说明下;
- stylelint 和 eslint 类似,主要用于规范我们的样式文件
- mini-css-extract-plugin 用于单独打包样式文件的插件
- optimize-css-assets-webpack-plugin 用于优化样式资源的插件
接下来我们需要配置 sass loader 和 css loader;
const cssLoader = { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, ], }; const sassLoader = { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, { loader: 'sass-loader', }, ], }; const cssLoader = { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, ], }; const sassLoader = { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'postcss-loader', options: { config: { path: path.join(__dirname, './postcss.config.js'), } }, }, { loader: 'sass-loader', }, ], }; ... module.exports = { ... sassLoader, cssLoader, };
增加插件处理用于优化样式文件;
在 webpacj/pugin.js 中添加下面内容;
const _ExtractTextPlugin = require('extract-text-webpack-plugin'); const _HtmlWebpackPlugin = require('html-webpack-plugin'); const _MiniCssExtractPlugin = require("mini-css-extract-plugin"); const _StyleLintPlugin = require('stylelint-webpack-plugin'); const _OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const cssnano = require('cssnano'); const path = require('path'); const StyleLintPlugin = new _StyleLintPlugin({ configFile: path.resolve(__dirname, './stylelint.config.js'), context: path.resolve(__dirname, '../css'), files: '**/*.css', failOnError: false, quiet: false, }); const MiniCssExtractPlugin = new _MiniCssExtractPlugin({ // both options are optional filename: "vr-player.min.css", chunkFilename: "[id].css" }); const OptimizeCssAssetsPlugin = new _OptimizeCssAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }) module.exports = { MiniCssExtractPlugin, StyleLintPlugin, OptimizeCssAssetsPlugin };
在 webpack/webpack.config.js 中增加 plugins 的配置;
... const plugins = require('./plugins'); module.exports = { ... plugins: [ // plugins.ExtractTextPlugin, plugins.MiniCssExtractPlugin, plugins.HtmlWebpackPlugin ] };
处理 svg 或者 图片资源
npm i image-webpack-loader url-loader base64-inline-loader --save-dev
修改 webpack/loader.js 中的配置:
const svgLoader = { test: /\.svg$/, use: [ { loader: 'image-webpack-loader', }, { loader: 'base64-inline-loader', } ], }; const imageLoader = { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader"color: #ff0000">配置 devServer
npm i webpack-dev-server --save-dev在新的配置中我们可以在 devServer 中配置我们起一个服务器的端口号和网络控制;
module.exports = { ... devServer: { port: 9000, headers: { 'Access-Control-Allow-Origin': '*' }, hot: true, inline: true, progress: true, quiet: true, compress: true, disableHostCheck: true, }, }设置 package.json 的命令
{ "scripts": { "build": "webpack -p --config ./webpack/webpack.config.js --display-error-details", "dev": "webpack-dev-server --config ./webpack/webpack.config.js --display-error-details" } }差不多就这样子可以完成基本的配置了;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]