入浅出篇-webpack _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:【入浅出篇-webpack】- 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文件里定义的东西复制代码