入浅出篇-webpack

webpack简介：

• webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

为什么使用webpack：

• 转换Es6语法
• 转换JSX
• css预处理器/前缀补全
• 图片压缩
• 压缩混淆——不让源代码逻辑直接暴露

一. webpack安装：

1. 安装 node.js —— 要使用webpack,必须确保电脑上存在着node.js这个运行环境
2. 安装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

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。