vue-cli中chainWebpack的使用

npx webpack --watch // 热编译
npx webpack-dev-Server //启动服务
npx webpack-dev-Server --open //启动服务，并打开浏览器
npx webpack --env production --env goal=local //编译的结果中有编译是输入的信息,通过这些信息确定使用那个环境(这时的配置文件需要导出一个函数，通过函数返回配置对象)
npx webpack --env production //生产环境下打包
npx webpack --env development //开发模式打包
npx webpack -c ./comfig/webpack.config.dev.js //打包,并指定运行那个配置文件,当前是开发环境
npm install --save-dev html-webpack-plugin // 自动引入文件
npm i webpack-dev-Server -D //自动刷新
npm i webpack webpack-cli --save--dev
npm i less-loader less -D //解析less，scss
npm i css-loader -D //解析css（或是由less-loader解析过less文件）
npm i style-loader -D // 将css-loader解析后的文件放到网页上
npm i csv-loader xml-loader -D //xml csv/tsv文件解析
npm i toml yaml json5 -D //解析toml、yaml、json5文件
npm i -D babel-loader @babel/core @babel/preset-env 
// babel-loader  解析es6为低版本es语法，适配浏览器
// @babel/core babel核心模块
//@babel/preset-env  babel预设，一组babel插件集合
npm i @babel/runtime -D // 包含regeneratorRuntime运行时需要
npm i @babel/plugin-transform-runtime -D //使regeneratorRuntime在被需要时，自动导入，编译时需要
// 解析.vue文件
npm i --save-dev vue-loader-plugin
npm i -D vue-loader
npm i mini-css-extract-plugin -D //抽离文件
npm i css-minimizer-webpack-plugin -D //压缩文件
npm i terser-webpack-plugin -D //压缩代码

//提示找不到webpack 运行下面代码
npm link webpack
// 合并配置文件
npm i webpack-merge -D

此时可以执行npx webpack命令，npx依托于npm，它的作用就是观察在当前目录下有没有你想运行的命令，没有就会去上一级目录寻找。

vue需要安装的loader和plugin

全局安装webpack 打包工具
```
npm install webpack webpack-cli -g
```
解析css 和展示样式的loader —save-dev开发时需求
```
npm install css-loader style-loader --save-dev
```
解析url 背景图片或者需要地址的时候
```
npm install url-loader --save-dev
```

解析.vue文件模块化组件

npm install vue-loader vue-template-compiler --save-dev

自动生成index.html文件自动导入js

 npm install html-webpack-plugin --save-dev

发布时使用压缩文件

npm install uglifyjs-webpack-plugin --save-dev

服务器运行

npm install webpach-dev-server --save-dev

还有一些相关配置做一个笔记 ```javascript const path = require(‘path’) const webpack = require(‘webpack’) //自动生成html什么七七八八插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’) //压缩js插件 const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin’) const VueLoaderPlugin = require(‘vue-loader’)

module.exports = { //入口 (打包的文件) entry: ‘./fvue/main.js’, //出口 (打包生成的文件，之后使用) output: { //使用绝对路径，找到文件夹 path: path.resolve(__dirname, ‘dist’), filename: ‘bundle.js’, //url默认文件夹 HtmlWebpackPlugin使用了该插件就不需要这个配置了 // publicPath: “dist/“ }, // mode: “development”,

//一些loader module: { rules: [{ test: /.css$/i, use: [“style-loader”, “css-loader”], },

    {
        test: /\.(png|jpg|gif)$/i,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 8192,
                name: 'img/[name].[hash:8].[ext]'
            },
        }],
    },
    {
        test: /\.vue$/,
        loader: 'vue-loader'
    },
],

//编译vue中的template
resolve: { //alias 别名 alias: { ‘vue$’: ‘vue/dist/vue.esm.js’ } }, plugins: [ // make sure to include the plugin for the magic // new VueLoaderPlugin(),//这个会报错不知道为什么 new webpack.BannerPlugin(“最终版权归’orange’所有”), new HtmlWebpackPlugin({ template: ‘index.html’ }) ],

devServer: { contentBase: ‘./dist’, inline: true, } }

```

webpack0-webpack配置及通用命令\插件\loader等安装

vue-cli中chainWebpack的使用

vue需要安装的loader和plugin