进击webpack4 (基础篇二:配置)
栏目: JavaScript · 发布时间: 5年前
内容简介:webpack 有4大概念mode: 指定环境是development还是production 决定了打包出来的文件是压缩还是未压缩的entry: 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 其中分为单入口跟多入口配置 可以是string,array,object
webpack.config.js基础配置
webpack 有4大概念
- 入口(entry)
- 输出(output )
- loader
- 插件(plugins)
- 入口与出口
//webpack.config.js const path = require('path') module.exports = { mode:'development', // 指定生产还是开发 entry:'./src/index.js', // 入口文件 output:{ filename:'bundle.js', // 打包后的文件名 path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对路径 我们需要node的path模块去解析路径 } }
mode: 指定环境是development还是production 决定了打包出来的文件是压缩还是未压缩的
entry: 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 其中分为单入口跟多入口配置 可以是string,array,object
// entry:'./src/index.js' 是下面的简写 entry:{ main: './src/index.js' },
output:包含打包后的名字跟路径, 如果是多入口应用, 可以设置filename为[name].js, entry里的key值会替换掉name 生成文件夹。
- loader
loader 用于对模块的源代码进行转换。
const path = require('path') module.exports = { mode:'development', // 指定生产还是开发 entry:'./src/index.js', // 入口文件 output:{ filename:'bundle.js', // 打包后的文件名 path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对路径 我们需要node的path模块去解析路径 }, module: { rules: [] // 包含一系列的规则 } }
- plugin
plugin是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。
// 代码省略 module: { rules: [ ] //包含一系列规则 }, plugins: [ // new PluginName 去生成js对象供给 webpack compiler 调用 ]
- 本地开发配置服务
yarn add webpack-dev-server -D
本地开发需要安装webpack-dev-server 内部是基于express 实现的一个服务 ,可让让服务运行在本地,开发更方便
安装完毕在dist目录下新建一个index.html 并且引入打包好后的bundle.js
运行 npx webpack-dev-server
并未显示index.html 需要在webpack-config.js 配置
plugins: [ // new PluginName 去生成js对象供给 webpack compiler 调用 ], devServer:{ contentBase: './dist', //当前服务以哪个作为静态资源路径 host:'localhost', // 主机名 默认是localhost port:3000, // 端口配置 open:true, // 是否自动打开网页 }
重新运行 npx webpack-dev-server
自动打开网页并且能正常显示页面
如果觉得npx 麻烦的话,可以在package.json 配置脚本
"scripts": { "dev": "webpack-dev-server --config webpack.config.js" }
样式文件的处理
注意:为了显示效果,不用每次手动修改html 我们先装一个html模板插件
yarn add html-webpack-plugin -D
webpack-config.js 配置
const HtmlWebpackPlugin = require('html-webpack-plugin') //.... plugins: [ // new PluginName 去生成js对象供给 webpack compiler 调用 new HtmlWebpackPlugin({ template:'./index.html', // 作为模板的文件 filename:'index.html' //打包生成后的文件 }) ],
进入正题:
样式文件分为css,less scss 之类的 需要各种loader 先以css作为 样例
需要先安装 style-loader跟css-loader
- css的处理
yarn add style-loader css-loader -D
webpack.config.js 配置
// 代码省略 module: { rules: [ { test:/\.css$/, use:['style-loader','css-loader'] } ] },
rules 里放的是一个个规则对象, test是匹配到的文件 loader是从下往上执行, 从右往左执行, 也就是说命中css结尾的文件后 先用css-loader去解析,解析完毕后交由style-loader 插入到html模板里
此处use内部 有2种写法
loader:['style-loader','css-loader'] loader:['style-loader',{loader:'css-loader',options:{}}
- less的处理
需要安装less less-loader
yarn add less less-loader -D
//webpack-config.js module: { rules: [ { test:/\.less$/, use:['style-loader','css-loader','less-loader'] } ] },
sass 配置同理
- 给样式加前缀 如-webkit- 需要安装autoprefixer, postcss-loader
yarn add postcss-loader autoprefixer -D
根目录需要新建postcss.config.js
// postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] }
webpack-config.js rules: [ { test: /\.less$/, use: [ "style-loader", "css-loader", "less-loader" ] } ]
- 提取样式文件
yarn add mini-css-extract-plugin -D
//config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 注意MiniCssExtractPlugin 不能在development环境中使用 !! //.... mode:'production', // 指定生产还是开发 module: { rules: [ { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] } ] }, plugins: [ // new PluginName 去生成js对象供给 webpack compiler 调用 new HtmlWebpackPlugin({ template:'./index.html', filename:'index.html' }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] //...
- 压缩提取出来的样式文件
需要用到uglifyjs-webpack-plugin,optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
//webpack-config.js module.exports = { //... optimization: { // 优化项 这里OptimizeCSSAssetsPlugin 需要UglifyJsPlugin minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true // set to true if you want JS source maps }), new OptimizeCSSAssetsPlugin({}) ] }, }
js文件的处理
这里自然轮到我们的babel出场啦 把es6解析为es5 需要这几个loader
yarn add babel-loader @babel/core @babel/preset-env -D
{ test:/\.js/, use:{ loader:'babel-loader', options:{ presets:[ '@babel/preset-env' ] } } },
es7的语法类似
class Parent{ }
这种需要@babel/plugin-proposal-class-properties
yarn add @babel/plugin-proposal-class-properties -D
另外装饰器方面需要
yarn add @babel/plugin-proposal-decorators -D
{ test:/\.js/, use:{ loader:'babel-loader', options:{ presets:[ '@babel/preset-env' ], plugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }] ] } } },
像一些js内置的api 比如生成器 这种需要
yarn add @babel/plugin-transform-runtime -D
exclude:/node_modules // 必须配置 不然会解析到node_modules 里的js //.... plugins: [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }] ["@babel/plugin-transform-runtime"] ]
还有一些es7 实例上的某些方法 。字符串的include 这些也要转换
yarn add @babel/polyfill -D
需要添加到entry上或者在入口文件导入
全局变量的引入问题
有时候我们不想在每个模块都导入某个库或者插件 只需要这样配置
plugins: [ // new PluginName 去生成js对象供给 webpack compiler 调用 new webpack.Provide({ // 自动在每个模块内先导入了React React:'react' }), ],
静态资源的处理
yarn add file-loader url-loader -D
{ test: /\.png|jpg|gif$/, use: { loader:'url-loader', options:{ limit:2048 // 小于2k 的会用url-loader转为base64 否则file-loader转为真实img outputPath:'static/image/' //指定输出目录 }, } },
预告: 多页面配置 跨域 区分不同环境 映射
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP高级程序设计
Kevin McArthur / 汪泳 等 / 人民邮电出版社出版 / 2009.7 / 45.00元
今天,PHP已经是无可争议的Web开发主流语言。PHP 5以后,它的面向对象特性也足以与Java和C#相抗衡。然而,讲述PHP高级特性的资料一直缺乏,大大影响了PHP语言的深入应用。 本书填补了这一空白。它专门针对有一定经验的PHP程序员,详细讲解了对他们最为重要的主题:高级面向对象、设计模式、文档、测试和标准PHP库等内容。同时,为适应目前Web开发的新趋势,作者还全面探讨了MVC架构和Z......一起来看看 《PHP高级程序设计》 这本书的介绍吧!