webpack相关

webpack相关

webpack版本号：4.41.5

引入 VUE-LOADER 的插件:const VueLoaderPlugin=require('vue-loader/lib/plugin')

<!--用于解析.vue文件-->

引入html-webpack-plugin 生成html文件：<!--打包之后生成html文件-->

const HtmlWebpackPlugin = require('html-webpack-plugin')

引入clean-webpack-plugin 插件：<!--新的打包文件生成后删除之前打包生成的bundle.js-->

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

const merge = require('webpack-merge') 整个两个配置文件

--------------------------------------------------------------<分割线>-------------------------------------------------

配置webpack

devtool:'eval' 的作用：

将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

webpack-dev-server的作用 webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务

主要提供两个功能：

为静态文件提供服务 自动刷新和热替换 通过配置proxy实现请求转发，即当接口域名发生改变时，我们不用一个一个修改接口，只要修改配置项的域名就可以了

通过配置historyFallback为true，解决请求不到页面问题，如果访问除根路径以外的地址，最终都会转向去请求根路径。

devServer:{

contentBase:'./dist',//为静态文件提供服务自动刷新和热替换

open:true,

hot:true

},

module 打包规则

rules:[{

test:/\.vue$/,

loader:'vue-loader' <!--解析打包VUE文件-->

},{

test:/\.(jpg|jpeg|png|svg)$/,

loader:'file-loader', <!--打包图片文件-->

options:{

name:'[name].[ext]',

limit:2048 <!--限制大小-->

},

},{

test:/\.css$/,

use:['style-loader','css-loader']

<!--解析打包css文件 css-loader： 把所有的css文件解析成为css 代码，集合到一个css文件中；style-loader： style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中-->

},{

test:/\.styl(us)?$/,

use:['vue-style-loader','css-loader','postcss-loader','stylus-loader']

<!--stylus-loader：解析stylus文件 postcss-loader:将解析后的stylus加载成css格式， vue-style-loader：帮我们直接将css-loader解析后的内容渲染到vue页面当中-->

}]

plugins:[

new VueLoaderPlugin(),

new HtmlWebpackPlugin({

template:'./index.html' <!--打包生成后的文件是以index为模板的-->

}),