webpack的介绍和安装
webpack是什么
webpack是一个静态模块打包工具，这里涉及到了俩个概念就是模块和打包，webpack会把我们编写的代码，进行整合转化成浏览器可识别的代码，比如把sass编译成css，es6编译成es5等等，其实还有很多打包工具，比如：grunt，gulp，rollup（vue的源码就是使用这个构建的）等等
模块
webpack支持的模块化方式：AMD，CMD，commonJS，es6;(最后打包的没有这些模块化代码) 在ES6之前我们要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发； 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖并且将其进行整合打包 webpack其中的一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系 而且不仅仅是js文件，我们的css，图片，json文件等等在webpack中都可以被当做模块来使用; 这就是webpack中模块化的概念；
打包
webpack进行模块化后，并且处理模块间的各种复杂关系后，然后在将webpack中的各种资源进行打包合并成一个包或多个包 并且在打包过程中还可以对资源进行处理，比如压缩图片，讲scss转成css，将es6语法转换为es5语法，将ts转换成js等等操作 webpack打包的时候回根据入口文件依次去找引入的模块进行打包 （打包的操作grunt/gulp也可以帮助我们完成）
grunt/gulp和webpack的区别
1.grunt、gulp的核心是Task(任务) 2.我们可以配置一系列task(也可以说是任务流)，并且定义task要处理的事务（例如es6，ts转化，图片压缩，scss转成css）之后让grunt/gulp来一次执行这些task，而且让整个流程化自动化 3.所以grunt/gulp也被称为前端自动化任务管理工具 4.grunt/gulp更加强调的是前端流程的自动化，通过给他定义一大堆的task，进行处理一大堆东西，模块化不是它的核心，如果没有做很严格的配置的话，就不可以使用模块化 5.webpack更加强调的是模块化开发管理（各种模块化开发都支持），而且还会帮你处理模块之间的依赖，而文件压缩合并，less、scss预处理等功能，都是他附带的功能
grunt/gulp使用场景
1.工程化模块化非常简单，甚至没有用到模块化的概念 2. 只需要进行简单的合并，压缩，就是用grunp/gulp即可 3. 如果整个项目使用了模块化管理，而且相互依赖特别强，我们就需要使用webpack了
webpack安装
webpack是依赖于node环境的 node环境为了可以正常的执行很多代码，必须其中包含各种依赖的包 npm工具是为了管理node环境下的各种包 只是他们三者的关系
全局安装webpack
//安装webpack
npm install webpack -g
查看是否安装
webpack -v/webpack --version
局部安装webpack
--save-dev 是开发时依赖，项目打包后不需要继续使用的
cd 对应的目录
npm install webpack --save-dev
局部安装和全局安装的区别
在终端直接执行webpack命令，使用的是全局安装的webpack 在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack 安装之后就可以让webpack对我们整个项目进行构建在对相关代码进行打包了
webpack起步
cd 当前项目目录下
webpack ./src/mian.js ./dist/build.js
//解释：
在当前项目目录下进行webpack打包文件
webpack ./src/mian.js（需要打包的文件/入口）./dist/build.js（打包到指定目录的文件/出口）
webpack打包的时候，会查看当前文件是否依赖其他模块，如果依赖其他模块也会打包进去（webpack会处理好各种模块之间的依赖）
webpack的配置
打包的时候是有一个入口和出口的，我们可以通过配置告诉webpack入口和出口在哪里，配置好直接执行命令就好了
配置文件一般的名字为webpack.config.js，可以改 项目中一但使用到了node的包，先npm init命令把package.json文件建立起来，package.json是node帮我们管理包所用到的
//webpack.config.js
//导入获取动态路径插件,依赖于node包，node全局里面有的包，不需要下载
const path = require('path');
//导入webpack 使用webpack内置插件
const webpack = require('webpack');
//导入安装的html-webpack-plugin插件 用于在dist文件夹生成index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入uglifyjs-webpack-plugin插件 用于压缩js 也可以说是丑化
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
//通过commonJS的方式导出配置
module.exports = {
//入口,值是入口文件路径 （多页面可以有多个入口）
entry: './src/mian.js',
//多入口形式
//entry:['./entry1','./entry2']
//entry: { page1:'./page1', page2:['./entry1','./entry2'] }
//出口,不能简单写（只有一个出口）
output: {
//出口路径,必须为绝对路径，为了以后方便需要动态获取绝对路径
//path其实是一个模块，里面有一个函数
//path.resolve 用于拼接路径，把俩个路径拼接到一起
//__dirname是一个全局变量，node上下文中的自带全局变量，这个变量保存了当前文件所在的路径(绝对路径)
//这样拼接的就是绝对路径了
path: path.resolve(__dirname, 'dist'),
//出口文件名
filename: 'index.js',
//只要是url资源都会拼接上当前的路径（图片等）
publicPath: 'dist/', //(使用了HtmlWebpackPlugin,这个配置项就可以去掉了，因为HtmlWebpackPlugin在dist文件夹生成了index.html，当前文件就不需要在指定引入打包后的文件夹路径了)
},
//把webpack和npm run serve/build关联起来,也可以说把webpack的命令映射到npm run build命令上，需要在package.json文件中配置
//npm run build 是做一些项目构建，打包
module: {
rules: [
//当匹配到以css后缀结尾的文件就会应用use中对应
//的loader
{
test: /\.css$/, //这是个正则表达式匹配文件后缀为css的文件
use: ['style-loader', 'css-loader']
//css-loader负责将css文件进行加载，style-loader负责把css模块的导出作为样式添加到DOM中
//webpack读取多个loader的时候是从右向左读的，如果顺序不对会报错
},
{
test: /\.less$/, //这是个正则表达式匹配文件后缀为less的文件
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
//less-loader负责把less文件进行加载转换成css文件,css-loader负责将css文件进行加载，style-loader负责把css模块的导出作为样式添加到DOM中
//webpack读取多个loader的时候是从右向左读的，如果顺序不对会报错
},
//处理图片依赖,webpack在加载图片的时候，解析到图片的时候会查看图片大小是否小于url-loader设定的limit值，如果小于limit值就采用url-loader把图片转换成base64进行加载，如果大于这个值就采用file-loader进行加载，file-loader不需要特别的配置，只需要安装就好了
{
test: /.(png|jpg|gif)$/, //匹配图片
use: [
//url-loader功能类似于 file-loader但是在文件大小（单位 byte）低于指定的限制时，返回一个DataURL。
{
loader: 'url-loader',
//当加载图片时,图片大小小于limit的时候,会将图片编译成base64字符串形式,一般开发都会配置8KB左右
options: {
//文件大小限制是否对文件启用base64
limit: 8192,
/**文件打包后，在打包文件夹下面的img文件夹使用自己图片的名字[name]是使用图片原来的名字，固定写法,如果写成img/name他就会当成img下面name文件了，如果写成img/name/就会变成img文件夹下面的name文件夹下的文件**/
//[name]是使用图片原来的名字
//[hash:8]默认取32位hash值,太长了，我们这里只截取八位hash值
//[ext] 固定写法，使用原来的图片文件后缀
//. :用于链接
name: 'img/[name].[hash:8].[ext]'，
}
}
]
},
{
test: '/\.m?js$/', //匹配js文件
//排除这些文件夹，不需要做转换
exclide: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//匹配es6语法进行转换成es5
presets: ['es2015']
}
}
}, {
test: '/\.vue$/', //匹配.vue文件做编译
use: ['vue-loader']
},
]
},
//一般用来解决路径问题
resolve: {
// 配置省略文件后缀名,这样引入文件的时候就不需要写文件后缀名了
extensions: ['.js', '.css', '.vue'],
//别名得意思
alias: {
//如果vue打包错误，则需要改变构建版本，将runtime-only版本改为runtime-compiler版本
/**
* vue发布了很多版本，我们引入不同的版本即可，这个是去node_modules下面的vue的dist文件夹寻找vue.esm.js进行使用
*/
'vue$': 'vue/dist/vue.esm.js'
}
},
// webpack插件的使用
plugins: [
//给打包的文件在文件头加上版权
new webpack.BannerPlugin('最终版权以及解释权归前端若水所有'),
/**如果不设置配置项也会生成一个默认的index.html文件，如果设置了配置项的template属性,他是会按照当前webpack.config.js文件相同路径下面的index.html文件作为模板进行生成一个index.html文件**/
new HtmlWebpackPlugin({
template: 'index.html'
}),
//压缩js,webpack自带有代码压缩，不过报错了，所以使用这个，vue脚手架也是使用的这个
//压缩过的js,会把代码中的命名进行简写删除空格和注释进行丑化
new uglifyjsPlugin()
],
//可选的本地开发服务器配置
devServer: {
//为哪一个文件夹提供本地服务，默认是根文件夹
contentBase: './dist',
//端口号,默认8080
port: "9000",
//是否监听页面实时刷新
inline: true,
//在SPA页面中，依赖HTML5的history模式
historyApiFallback: ''
}
}
package.json中的scripts的脚本在执行的时候，会按照一定的顺序寻找命令对应的位置; 首先会寻找本地的node_modules/.bin路径中对应的命令; 如果没有找到，会去全局的环境变量中寻找;
//package.json
//webpack配合npm使用必须在scripts中配置命令才可以使用
//使用 npm run test（配置的命令） 就可以运行了
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
/**npm run build命令会执行webpack命令,该命令会先去找本地的webpack包和
webpack.config.js配置文件，找不到的情况下在去找全局的包和配置文件，有的时候本地的包和
全局安装的包版本不一样，一般都是拥有本地的包，如果使用了全局的则会因为配置文件的
不同会报错，比如入口和出口，在终端上直接运行webpack命令都是全局的，而通过
package.json文件去映射的命令则是本地的，但首要条件是本地项目安装了webpack**/
//webpack是开发时需要用的，运行时就不需要了，所以只需要安装在开始时依赖
npm install webpack --save-dev
在终端上敲的命令都是执行全局的包，也可以使用本地的不过太麻烦，需要在nodemon包里面一层一层找
webpack命令执行的时候会自动执行该文件,哪里作为入口哪里作为出口
webpack运行不同配置文件
有俩个webpack文件
prod.config.js //生产环境
dev.config.js //开发环境
webpack --config prod.config.js
package.json中定义启动
每次执行都敲一长串代码十分不方便，我们可以在package.json的scripts中定义自己的执行脚本 package.json中的脚本在执行时会按照一定的顺序寻找命令对应的位置 首先会寻找本地的node_modules/.bin路径中对应的命令 如果没有找到，回去全局的环境变量中寻找
//执行命令
npm run package.json文件中的scripts中定义的字段
loader的使用
loader是webpack中一个非常核心的概念. loader是帮助我们处理css，图片，包括将es6转为es5代码，将ts转换es5代码，将scss转为css，将。jsx，。vue文件转为js文件等等 webpack本身是不支持这些功能的，所以就需要给webpack扩展对应的loader，不同的文件处理需要使用到不同的loader
loader使用过程
步骤一：通过npm 安装需要使用的loader 步骤二：在webpack.config.js中的modules关键字下进行配置 大部分loader我们都可以在webpack官网中找到，并学习对应的用法
CSS文件loader
把css文件当成一个模块引入到入口文件中，到时候打包的话就会打包到同一个js文件中，官网上有示例
CSS-loader只负责加载css文件，不负责解析，也不负责把css文件放到html文件中让他生效
所以这是需要使用到style-loader，他的作用是将模块的导出作为样式添加到DOM中 如果缺少style-loader,样式会不生效
less文件处理
项目中使用less，scss，stylus来写样式我们会怎么处理，以less为例 在入口文件引入less的样式文件
需要安装俩个 一个是less-loader,一个是less，less是用于对less代码进行解析成css代码的，less-loader负责进行less文件的加载的
//安装
npm install --save-dev less-loader less
webpack对于图片的处理
开发中会用到很多资源,比如图片,视频,json文件,这里以图片为例通过webpack进行处理 不同的图片webpack会做出不同的处理 webpack加载入口文件的时候,会碰到css文件,如果css文件中有图片就会当成一个模块进行加载
//安装
npm install --save-dev url-loader
//url-loader要和file-loader结合使用,这样当图片大小超过url-loader设置的值的时候，就会启用file-loader进行加载，file-loader不需多余的配置，安装就好了，打包的时候会把图片打包进去，文件名都是一个32位的hash值，是通过hash算法自动生成的，为了防止名字重复，安装file-loader图片不显示是因为index.html文件寻找的是当前目录下面的文件，需要去配置一下publicPath字段
es6语法处理
仔细阅读打包的js文件，发现写的es6语法并没有转成es5，那么就意味着对es6还不支持的浏览器没有办法很好的运行我们的代码，在webpack中直接使用bable对用loadedr就可以了
//安装 babel-loader@7这个是因为跟当前项目比较匹配才安装的
//babel-core 必须安装
//babel-preset-es2015 如果你是从es6转换成es5就是安装的这个东西，如果是ts就是不同的配置，有可能是别的
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
官网安装
// babel-preset-env 安装这个需要另外一个文件babel.rc进行另外的配置，适合复杂的项目
npm install babel-loader babel-core babel-preset-env
webpack配置Vue
webpack配置vue必须安装vue vue实例中的vue的el属性挂载的内容会被template属性里面的内容替换 如果加载.vue文件需要使用到vue-loader和vue-template-compiler
//安装, vue由于运行时也需要用到所有安装到运行时
//loader就开发时用到，所以就要安装到开发时
//vue-loader 对vue文件进行加载
/**
安装过vue-loader报错说明还得再给他配置一个插件，这是因为从vue-loder14版本开始使用他必须得在配置一个插件，
如果不想配置这个插件，可以使用一个相对于来说较为低一点的版本，比如13.0.0
**/
//vue-template-compiler 对vue文件进行编译
npm install --save-dev vue-loader vue-template-compiler
plugin(插件)的使用
plugin是什么?
- plugin是插件的意思，通过用于对某个现有的架构进行扩展
- webpack中的插件就是对webpack现有功能的各种扩展,比如打包优化，文件压缩等等.
loader和plugin的区别
- loader主要用于转换某些类型的模块,他是一个转换器[ 加载器 / 转化器 ]（用于css文件，js文件的转换进行加载，当某些文件不能使用的时候就要使用到对应的loader进行转换加载）
- plugin是插件，它对对webpack本身的扩展，是一个扩展器,插件分为内置插件和外置插件，内置插件不需要安装，外置插件需要安装
plugin(插件)的使用过程
- 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 在webpack.config.js中的plugins中配置
版权插件的使用
//导入webpack 使用webpack内置插件
const webpack = require('webpack');
// webpack插件的使用
plugins: [
//给打包的文件在文件头加上版权
new webpack.BannerPlugin('最终版权以及解释权归前端若水所有')
]
HtmlWebpackPlugin插件的使用
index.html文件是存放在项目的根目录下的，真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，name打包的js等文件就没有了意义，所以我们需要将html文件打包到dist文件夹中，这个时候可以使用HtmlWebpackPlugin插件
HtmlWebpackPlugin可以为我们所做的事情
- 自动生成一个index.html文件(可以指定模板来生成)
- 将打包的js文件，通过script标签插入到body中
//安装
npm install html-webpack-plugin --save-dev
//导入安装的html-webpack-plugin插件 用于在dist文件夹生成index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
使用插件，修改webpack.config.js文件中plugins部分的内容如下：
这里的template表示根据什么模板来生成index.html
另外,我们需要删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有问题
**/
plugins: [
/**如果不设置配置项也会生成一个默认的index.html文件，如果设置了配置项的template属性,他是会按照当前webpack.config.js文件相同路径下面的index.html文件作为模板进行生成一个index.html文件**/
new htmlWebpackPlugin({
template:'index.html'
})
]
对js进行压缩的插件
在项目发布之前，我们必然需要对js等文件进行压缩处理，这里我们就对打包的js文件进行压缩，我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定为1.1.1,和vue-cli2保持一致
//安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
//导入uglifyjs-webpack-plugin插件 用于压缩js 也可以说是丑化
const uglifyjsPlugin=require('uglifyjs-webpack-plugin');
// webpack插件的使用
plugins: [
//压缩js,webpack自带有代码压缩，不过报错了，所以使用这个
//vue脚手架也是使用的这个
//压缩过的js,会把代码中的命名进行简写删除空格和注释进行丑化
new uglifyjsPlugin()
]
搭建本地服务器
- webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果.我们修改的东西他先不会放在硬盘里面而是暂时缓存在内存里面，让我们可以继续运行代码，因为读取硬盘速度远远大于内存的，所以暂时缓存在内存中是为了更好的测试代码，在浏览器读取代码的时候都是从内存中读取的，如果执行了打包命令，就会把内存中缓存的代码输入到磁盘里面
- 不过他是一个单独的模块,在webpack中使用之前需要先安装它
//安装，这个插件是对应了webpack3.6.0的版本
npm install --save-dev webpack-dev-server@2.9.1
3.devserver也是webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist port:端口号 inline：页面实时刷新 historyApiFallback:在SPA页面中，依赖HTML5的history模式
//webpack.config.js文件配置
//可选的本地开发服务器配置
devServer: {
//为哪一个文件夹提供本地服务，默认是根文件夹
contentBase: './dist',
//端口号,默认8080
port: "9000",
//是否监听页面实时刷新
inline: true,
//在SPA页面中，依赖HTML5的history模式
historyApiFallback: ''
}
//在package.json文件中配置一个scripts
//-- open参数表示直接打开浏览器
scripts:{
"dev":"webpack-dev-server --open"
}
webpack配置文件抽离
webpack中有些配置是开发中所需要的，有些是生产中所需要的，这个时候就需要去做一下配置文件的抽离了
- base.config.js //开发和生产都使用到的配置
- dev.config.js //开发使用到的配置
- build.config.js //生产使用到的配置
需要在package.json文件修改下scripts命令 如果让他们自动找，他们只会去找我们同级目录下的webpack.config.js这个固定的文件，所以需要手动指定 分离别忘了修改出口文件路径
//这里对webpack的配置文件做了抽离，这里为了能够合并该项目
//需要安装一个东西
npm install webpack-merge -D
目录结构
|==build文件夹
|base.config.js
|build.config.js
|dev.config.js
|==package.json
base.config.js
//base.config.js
//webpack.config.js
//导入获取动态路径插件,依赖于node包，node全局里面有的包，不需要下载
const path = require('path');
//导入webpack 使用webpack内置插件
const webpack = require('webpack');
//导入安装的html-webpack-plugin插件 用于在dist文件夹生成index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//通过commonJS的方式导出配置
module.exports = {
//入口,值是入口文件路径 （多页面可以有多个入口）
entry: './src/mian.js',
//多入口形式
//entry:['./entry1','./entry2']
//entry: { page1:'./page1', page2:['./entry1','./entry2'] }
//出口,不能简单写（只有一个出口）
output: {
//出口路径,必须为绝对路径，为了以后方便需要动态获取绝对路径
//path其实是一个模块，里面有一个函数
//path.resolve 用于拼接路径，把俩个路径拼接到一起
//__dirname是一个全局变量，node上下文中的自带全局变量，这个变量保存了当前文件所在的路径(绝对路径)
//这样拼接的就是绝对路径了
path: path.resolve(__dirname, 'dist'),
//出口文件名
filename: 'index.js',
//只要是url资源都会拼接上当前的路径（图片等）
publicPath: 'dist/', //(使用了HtmlWebpackPlugin,这个配置项就可以去掉了，因为HtmlWebpackPlugin在dist文件夹生成了index.html，当前文件就不需要在指定引入打包后的文件夹路径了)
},
//把webpack和npm run serve/build关联起来,也可以说把webpack的命令映射到npm run build命令上，需要在package.json文件中配置
//npm run build 是做一些项目构建，打包
module: {
rules: [
//当匹配到以css后缀结尾的文件就会应用use中对应
//的loader
{
test: /\.css$/, //这是个正则表达式匹配文件后缀为css的文件
use: ['style-loader', 'css-loader']
//css-loader负责将css文件进行加载，style-loader负责把css模块的导出作为样式添加到DOM中
//webpack读取多个loader的时候是从右向左读的，如果顺序不对会报错
},
{
test: /\.less$/, //这是个正则表达式匹配文件后缀为less的文件
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
//less-loader负责把less文件进行加载转换成css文件,css-loader负责将css文件进行加载，style-loader负责把css模块的导出作为样式添加到DOM中
//webpack读取多个loader的时候是从右向左读的，如果顺序不对会报错
},
//处理图片依赖,webpack在加载图片的时候，解析到图片的时候会查看图片大小是否小于url-loader设定的limit值，如果小于limit值就采用url-loader把图片转换成base64进行加载，如果大于这个值就采用file-loader进行加载，file-loader不需要特别的配置，只需要安装就好了
{
test: /.(png|jpg|gif)$/, //匹配图片
use: [
//url-loader功能类似于 file-loader但是在文件大小（单位 byte）低于指定的限制时，返回一个DataURL。
{
loader: 'url-loader',
//当加载图片时,图片大小小于limit的时候,会将图片编译成base64字符串形式,一般开发都会配置8KB左右
options: {
//文件大小限制是否对文件启用base64
limit: 8192,
/**文件打包后，在打包文件夹下面的img文件夹使用自己图片的名字[name]是使用图片原来的名字，固定写法,如果写成img/name他就会当成img下面name文件了，如果写成img/name/就会变成img文件夹下面的name文件夹下的文件**/
//[name]是使用图片原来的名字
//[hash:8]默认取32位hash值,太长了，我们这里只截取八位hash值
//[ext] 固定写法，使用原来的图片文件后缀
//. :用于链接
name: 'img/[name].[hash:8].[ext]'，
}
}
]
},
{
test: '/\.m?js$/', //匹配js文件
//排除这些文件夹，不需要做转换
exclide: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//匹配es6语法进行转换成es5
presets: ['es2015']
}
}
}, {
test: '/\.vue$/', //匹配.vue文件做编译
use: ['vue-loader']
},
]
},
//一般用来解决路径问题
resolve: {
// 配置省略文件后缀名,这样引入文件的时候就不需要写文件后缀名了
extensions: ['.js', '.css', '.vue'],
//别名得意思
alias: {
//如果vue打包错误，则需要改变构建版本，将runtime-only版本改为runtime-compiler版本
/**
* vue发布了很多版本，我们引入不同的版本即可，这个是去node_modules下面的vue的dist文件夹寻找vue.esm.js进行使用
*/
'vue$': 'vue/dist/vue.esm.js'
}
},
// webpack插件的使用
plugins: [
//给打包的文件在文件头加上版权
new webpack.BannerPlugin('最终版权以及解释权归前端若水所有'),
/**如果不设置配置项也会生成一个默认的index.html文件，如果设置了配置项的template属性,他是会按照当前webpack.config.js文件相同路径下面的index.html文件作为模板进行生成一个index.html文件**/
new HtmlWebpackPlugin({
template: 'index.html'
}),
],
}
build.config.js
//build.config.js
//生产所需要的webpack.config.js文件
//导入uglifyjs-webpack-plugin插件 用于压缩js 也可以说是丑化
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
//引入webpack-merge用于合并webpack的分离配置文件
const webpackMerge = require('webpack-merge');
//引入基础的webpack.config配置
const baseConfig = require('./base.config.js');
//合并webpack配置 ,基础配置+生产配置,然后使用的话直接使用这个生产环境配置就可以了
module.exports = webpackMerge(baseConfig, {
// webpack插件的使用
plugins: [
//压缩js,webpack自带有代码压缩，不过报错了，所以使用这个，vue脚手架也是使用的这个
//压缩过的js,会把代码中的命名进行简写删除空格和注释进行丑化
new uglifyjsPlugin()
],
})
dev.config.js
//dev.config.js
//开发所需要的webpack.config.js文件
//引入webpack-merge用于合并webpack的分离配置文件
const webpackMerge = require('webpack-merge');
//引入基础的webpack.config配置
const baseConfig = require('./base.config.js');
//合并webpack配置 ,基础配置+开发配置,然后使用的话直接使用这个开发环境配置就可以了
module.exports = webpackMerge(baseConfig, {
// webpack插件的使用
devServer: {
//为哪一个文件夹提供本地服务，默认是根文件夹
contentBase: '../dist',
//端口号,默认8080
port: "9000",
//是否监听页面实时刷新
inline: true,
//在SPA页面中，依赖HTML5的history模式
historyApiFallback: ''
}
})
package.json
//package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev文件说明": "调用的是开发合并过后的webpack配置,启动本地服务器在进行打开浏览器",
"dev": "webpack-dev-server --open --config ./build/dev.config.js",
"build文件说明": "调用的是生产合并过后的webpack配置",
"build": "webpack --config ./build/build.config.js"
},
"author": "",
"license": "ISC"
}
webpack分析报告
项目体积依赖分析报告我们可以通过webpack生成,这份报告可以让我们看到哪些包占比大，哪些包占比小，哪个组件大,使用以下命令,使用命令后会在dist目录下生成一个report.html,这个就是我们当前项目的依赖分析报告
npm run build --report
如果执行以下发现此命令和
npm run build的结果一样，dist目录页没有生成report.html
npm run build命令式在package.json的scripts中定义的,没有起作用这就说明
npm run build后附加参数传递给script如果直接加--参数名是不起作用的。
npm run build -- --report，等于npm run build --report，在参数前需要加--，这是npm传递参数给script的方法。
npm run build -- --report
我们也可以直接在package.json中script中直接添加上,这样可以一劳永逸,
提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。
开发的时候一定要用development，因为追求的是打包速度，而不是体积,一些没有依赖的方法 变量 文件会保留，production则会移除；
发布上线的时候一定要用production，因为上线追求的是体积小，而不是打包速度,代码会进行压缩，比development的文件小;
--mode 是指定构建模式, prod是构建生产模式, --report是生成项目依赖分析报告
//package.json
"build": "vue-cli-service build --mode prod --report"
注意点
//webpack --config 执行指定配置文件
webpack --config ./build/build.config.js
webpack读取多个loader的时候是从右向左读的
org网站后缀都是非营利性组织
使用vue或者其他框架的时候,都是运行时依赖,采用开发时依赖是因为这是在配置环境
在windows系统之前最早的系统焦作DOS系统,他只允许存在后缀为3位的文件,所以就存在了,jpg文件,jpeg是jpg,.htm是.html文件 webpack打包的文件名都是一个32位的hash值，是通过hash算法自动生成的，为了防止名字重复 webpack官网
