入浅出篇-webpack
webpack简介：
- webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
为什么使用webpack：
- 转换Es6语法
- 转换JSX
- css预处理器/前缀补全
- 图片压缩
- 压缩混淆——不让源代码逻辑直接暴露
一. webpack安装：
- 安装 node.js —— 要使用webpack,必须确保电脑上存在着node.js这个运行环境
- 安装webpack —— 在命令行输入命令 npm install webpack -g
- npm 是 node.js 管理插件用的工具，install表安装， -g表全局安装
- 在命令行输入 webpack -v 查看其是否安装成功，并查看其版本
二. 配置文件出入口
- 首先创建一个文件 ： webwebpack.config.js —— 这个文件就当作我们的配置文件
entry：
1. 单个entry（写法1）： module.exports = { entry: './input.js' 当前入口文件叫做 input.js } 2. 单个entry（写法2）： module.exports = { entry: { main: '.input.js' } }; 3.多个entry module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' } } 复制代码
output —— 出口就是webpack打包完成的输出:
1.单个entry情况下对应的output： module.exports = { entry: './src/index.js', output: { path : path.resolve(_dirname,'dist'), //输出后存储的路径 filename : 'output.bundle.js' // 输出后文件的名字 } }; 2.多个entry情况下对应的output： module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' }, output: { path : path.resolve(_dirname,'dist'), filename : '[name].bundle.js' // name会自动替换文件名为入口的属性名 } } 复制代码
三. loader-常用loader：
- Webpack自身只支持加载js和json模块，而Loader能让webpack去处理其他类型的文件
- loader需要下载，如果不知道要下什么，可根据报错下载所需loader
url-loader - 将文件转换为base64 url的webpack加载程序，通常用于处理图片：
module.exports = { module: { rules : [{ test : /.(png|jpg|gif)$/i, //要匹配的文件 use : [{ loader : 'url-loader', //使用的规则 options : { limit:8192 //文件大小限制 } }] }] } }; 复制代码
babel-loader - 把高版本的js向后（es5）兼容
module :{ rules:[ //这个是url-loader { test:/.(png|jpg|gif)$/i, use:[ { loader:'url-loader', options:{ limit:8192 } } ] }, //这个是babel-loader { test:/.m?js$/, //检测将要匹配的文件 exclude: /(node_modules|bower_components)/, //要排除的文件 use:{ //使用了什么loader loader : 'babel-loader', options:{ presets:['@babel/preset-env'] //使用什么规则 } } } ] } 复制代码
sass-loader:
module.exports = { module: { rules : [ // sass { test: /.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ] } }; 复制代码
四. Plugin-常用插件：
- Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件，所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大，plugin可以监听webpack处理过程中的关键事件，深度集成进webpack的编译器，可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干，webpack自身也基于plugin系统搭建，webpack有丰富的内置插件和外部插件，并且允许用户自定义插件
- 与loader不同的是，使用plugin我们必须先引用该插件
例如:
const webpack = require('webpack'); // 用于引用webpack内置插件 const htmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: './input.html'}) ] }; 复制代码
minCssExtract:
plugins:[ new MiniCssExtracPlugin({ filename:'[name].css', //name 为 entry里的名字 不是必须设置 chunkFilename: '[id].css' //不是必须设置 }) ] //要使用这个的时候，要在sass-loader中的use里在配置一下，将style-loader换成这个MiniCssExtracPlugin.loader 复制代码
DefinePlugin:
- definePlugin允许创建可以配置的全局常量 new webpack.DefinePlugin([ 'service_url' : josn.stringify('http://www.baidu.com') // service_url 为变量，这样即使改变访问的地址，也可以通过变量来控制 ]) 复制代码
HtmlWebpackPlugin-帮助我们生成html文件
1. 系统默认生成的： plugins: [ new HtmlWebpackPlugin() // 这样就能执行了-> 就会生成index.html文件，并且会自动帮我们引入js和css文件 ] 2. 我们自定义的 new HtmlWebpackPlugin({ title: 'My App', //html的title filename: 'indexa.html' //生成的文件名字 template: 'template.html' //自己的输入文件的内容——在创建一个template.html文件 //就可以在template.html文件里定义title —— 在title标签里输入<%= htmlWebpackPlugin.options.title %> //同样也可在此文件里引用script 或 其他不需要打包的div }) //之后我们indexa.html里，就会出现template.html文件里定义的东西 复制代码
五. DevServer-热更新：
module.exports = { //... devServer: { contentBase: path.join(__dirname, 'dist'), //在哪个目录下启动该插件 ，并且此dist要与上面的output 相一致 compress: true, //是否压缩 port: 9000 // 启动的端口 // hot: true // 热替换 不写也是热替换 现在写true有可能报错，所以还是别写了吧 } }; 复制代码
注：
- 通常我们都会初始化文件 获得查看配置文件的文件。
- npm init - y
作者：Honer
链接：https://juejin.im/post/5da898376fb9a04dea5df587
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。