webpack

npm.taobao.org(淘宝镜像)： npm config set registry https://registry.npm.taobao.org

还原npm仓库： npm config set registry https://registry.npmjs.org

查看配置成功： npm config get registry

#介绍

本地安装 vs 全局安装

npm init -y　　　　// 初始化项目

npm 是node三个重要功能之一的包管理器

webpack3(2017)、webpack4(2018/2/25)

#命令

-D => --save-dev（开发）　　　　　　-S => -save（正式）　　　　　　-g => -global　　　　　　i => install

npm install --save-dev webpack (开发环境)　　　　　　// <=> npm install -D webpack

npm install --save webpack (生产环境)　　　　　　　　// <=> npm install -S webpack

npm install --save-dev webpack@<version>(版本) // @next　　

npm uninstall 模块　　　　　　　　　　　　　　　// 删除模块　

　npm list 　　　　　　　　　　　　　　　　　　　　　// 查看安装的模块

　npm i npm@latest -g　　　　　　　　　　　　　　　 // 更新npm到最新版本

webpack(npm webpack-cli -g/ 4.0)

node -v　　　　　　　　　　　　　　　　　　　　　//　　node版本

npm -v　　　　　　　　　　　　　　　　　　　　　　//　　npm版本

npm install vue-cli -g　　　　　　　　　　　　　　　//　　安装vue脚手架

vue -V　　　　　　　　　　　　　　　　　　　　　　//　　vue-cli 版本

npm view 包名 version/npm info 包名 ; npm ls 包名/npm ls包名 -g

#文件

1. webpack.config.js

entry：配置入口文件的地址，可以是单一入口，也可以是多入口。

output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。

module：配置模块，主要是解析CSS和图片转换压缩等功能。视图(css-loader/style-loader等的规则)

plugins：配置插件，根据你的需要配置不同功能的插件。逻辑

devServer：配置开发服务功能，后期我们会详细讲解。

webpack.config.js
```
devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    host: 'localhost',
    compress: true,
    port: 1718
}
```
package.json(webpack-dev-server热更)
```
"server": "webpack-dev-server"
```

#插件（项目名称不能为"webpack"）（使用npm install -D webpack-cli webpack，需全局安装并且项目内部安装 webpack和webpack-cli ）

html：html-webpack-plugin

css：style-loader-css-loader、extract-text-webpack-plugin（分离）（ sass-loader node-sass）、postcss-loader-autoprefixer（前缀）

js：uglifyjs-webpack-plugin

图片： file-loader、url-loader、html-withimg-loader

1.1. CSS文件打包（引入js文件）

style-loader　　　　css-loader　　　　　　　　　　　　// url()等、将css插入到页面的style标签

　　css的三种引入法

```
module:{
    rules:[
        {
            test:/.css$/,
            use:['style-loader','css-loader']
        }
    ]
},
```
```
module:{
    rules:[
        {
            test:/.css$/,
            loader:['style-loader','css-loader']
        }
    ]
},
```
```
module:{
    rules:[
        {
            test:/.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }
            ]
        }
    ]
},
```

1.2. CSS从js文件分离和图片路径问题

extract-text-webpack-plugin

const extractTextPlugin = require("extract-text-webpack-plugin");
new extractTextPlugin("/css/index.css");
module:{
  rules: [
      {
        test: /.css$/,
        use: extractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },{
         test:/.(png|jpg|gif)/ ,
         use:[{
             loader:'url-loader',
             options:{
                 limit:500000,　　　　　　// 文件大于是base64
                 outputPath:'images/'   // 图片输出路径

             }
         }]
      }
    ]
},
// 打包路径错误
var website ={
  publicPath:"http://192.168.1.108:1717/"
}
output.publicPath:website.publicPath

1.3. 消除未使用的CSS

purifycss-webpack　　　　purify-css

const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({ 
//这里配置了一个paths，主要是需找html模板，purifycss根据这 
个配置会遍历你的文件，查找哪些css被使用了。
paths: glob.sync(
  path.join(__dirname, 'src/*.html')),
}),
用这个插件必须配合extract-text-webpack-plugin这个插件,这个插件已经被废弃了，取而代之的是 mini-css-extract-plugin

1.4. Sass转css

sass-loader node-sass (前者依赖于后者)

{
  test: /.scss$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: "css-loader"
  }, {
    loader: "sass-loader"
  }]
}

分离情况

{
            test: /.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

1.5. css3添加前缀

postcss-loader autoprefixer

2. JS文件打包

uglifyjs-webpack-plugin

UglifyJS Webpack Plugin　　　　　　　　　　　　　//　　压缩代码中文文档

const uglify = require('uglifyjs-webpack-plugin');
plugins:[
    new uglify()
],

3. HTML文件打包

html-webpack-plugin

new htmlPlugin({

minify:{

removeAttributeQuotes: true, // 删除属性的引号

removeComments: true, // 删除注释

collapseWhitespace: true, // 删除空格

hash:true, // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。

template:'./src/index.html' // 是要打包的html模版路径和文件名称。

})

4. 图片

(1). css图片(background: url())

file-loader(解决路径问题)　　　　url-loader(图片多时转base, 内置了file-loader)

{
    test:/.(png|jpg|gif)/ ,
    use:[{
        loader:'url-loader',
        options:{
            limit:500000    // 图片超过多大转base64
        }
    }]
}

(2). html图片(<img src="">)

html-withimg-loader

{
    test: /.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

7. Vuex

vuex (vue的状态管理)

8. Element-UI

element-ui

　　　　在main.js 中引入:

　　　　import ElementUI from 'element-ui'
　　　　import 'element-ui/lib/theme-chalk/index.css'
　　　　Vue.use(ElementUI);

①.config/index.html打包路径设置

assetsRoot:构建输出目录也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录一个杠杠啥意思呢，是根目录的意思

②.vue项目打包之后页面空白解决办法/f5刷新

router文件的模式由history改为hash

https://blog.csdn.net/xr510002594/article/details/83752372

npm i -g live-server (热加载) => live-server

　　只定端口（live-server --port=4040）

#bug

0.错误 / 警告

webpack.config.js配置文件报错：The 'mode' option has not been set （ "dev": "webpack --mode development", "build": "webpack --mode production）

1. Error: Cannot find module 'webpack-cli'--解决方案(全局安装 => npm install webpack-cli -g)

https://blog.csdn.net/qq_33323251/article/details/80453692

2. html-webpack-plugin打包后没有html文件生成(webpack-dev-server阻止了文件的生成,虚拟文件localhost可以打开)

https://blog.csdn.net/yuse6262/article/details/97305050

https://jspang.com/detailed?id=32#toc215： 15节

grunt/webpack

http://www.myzaker.com/article/59af7b421bc8e02604000014/

中文技术文档的写作规范。

webpack4配置

npm audit fix

CMD命令

cd　　　　mkdir目录　　　　touch文件　　　　clear/cls(vscode)

{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
解决方法：

找到你的工程文件夹里的 YourProName
ode_modulesvue-loaderlib	emplate-compilerindex.js

//将以下代码
if (!isProduction) {
  code = prettier.format(code, { semi: false, parser: 'babylon' })
}
 
//修改为：
 
if (!isProduction) {
  code = prettier.format(code, { semi: false, parser: 'babel' })
}
来源：https://blog.csdn.net/u011280778/article/details/88107472

View Code