webpack.config.js的配置参数设置以及用到的插件

下载插件

npm i  vue-loader vue-template-compiler webpack webpack-cli css-loader style-loader stylus-loader stylus html-webpack-plugin clean-webpack-plugin webpack-dev-server url-loader -D
npm i vue
npm i vue-router//路由
npm i url-router //图片
npm i axios //请求

配置项

const path = require("path"),//拼接路径  jion reslove
webpack = require("webpack"),//模块打包工具 
VueLoaderPlugin = require("vue-loader/lib/plugin"),//node文件夹里面的解析插件
HtmlPlugin = require("html-webpack-plugin"),//加载页面中链接资源插件
{ CleanWebpackPlugin } = require("clean-webpack-plugin");//删除旧文件保留新文件插件

module.exports = {
mode: "development",//开发环境，不会压缩,
devtool: "cheap-module-eval-source-map",//明确指明哪里出错
entry: path.resolve(__dirname, "src/index.js"),//入口文件
output: {//出口文件
filename: "bundle.js",//打包后的文件名
path: path.resolve(__dirname, "dist"),//打包后的地址
publicPath: "/" //公共路径
},
module: {
rules: [{//读取解析规则
test: /\.vue$/,//解析的地址
loader: "vue-loader",//规则
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.styl(us)?$/,
// loader: "style-loader!css-loader!stylus-loader"
use: [//对象规则
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"stylus-loader"
],
exclude: path.resolve(__dirname, 'node_modules'),//排除node_modules目录下的文件
},
{
test: /\.(jpg|png|jpeg|gif|svg)$/,
use: [{
loader: "url-loader",
options: {
limit: 1024
}
}],
exclude: path.resolve(__dirname, 'node_modules'),//排除node_modules目录下的文件
},
]
},
devServer: {//
contentBase: path.resolve(__dirname, "dist"),//起服务的路径
open: true,//第一次运行打开默认浏览器地址
host: "127.0.0.1",
port: 3000,//端口号
hot: true,//热更新
// proxy:{},//反向代理地址
historyApiFallback: {
index: "/index.html"//404报错后直接返回根路径，解决刷新问题
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//启动热替换模块
new VueLoaderPlugin(),//node文件夹里面的解析插件
new HtmlPlugin({//加载页面中链接资源插件
template: "./src/index.html"
}),
new CleanWebpackPlugin()//删除旧文件保留新文件插件
]
}

js Es6转Es5需要下载

bebel-loader 和@babel/core @babel/preset-env
配置项

{
test: /\.js$/,
exclude: /node_modules/, //排除
loader: "babel-loader"
},

index.js文件夹需要引入"@bable/polyfill"

需要创建一个.babelrc文件并配置

{
"presets": [["@babel/preset-env",{
"useBuiltIns": "usage"
}]]
}

阿里图标打包配置

npm i file-loader

配置项

{
test:/.(tff|svg)$/,
loader:"file-loader"
}