JS开发-Vue技术-构建模块Plugin-Webpack

参考

官方: https://www.webpackjs.com/ 

. 创建vue工程-(webpack方式)
. 进入工程目录
. npm install -g @vue/cli-init (如已安装跳过)
. vue init webpack vue-project-spa

1. 配置环境参数【dev.env.js】【prod.env.js】

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

参照：main.js

console.log('process.env', process.env)

2. vue-loader

npm i webpack vue vue-loder css-loader vue-template-compiler

https://cloud.tencent.com/developer/news/230871
vue-loader作用 ：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理
css-loader：加载由 vue-loader 提取出的 CSS 代码。
vue-template-compiler：
　　把vue-loader 提取出的HTML模版编译成对应的可执行的 JavaScript 代码，
　　这和React中的JSX语法被编译成JavaScript代码类似。
　　预先编译好 HTML 模版相对于在浏览器中再去编译 HTML 模版的好处在于性能更好。
vue-loader的作用就是提取。

3. webpack-merge

npm install webpack-merge --save-dev
https://segmentfault.com/a/1190000017574161
https://segmentfault.com/a/1190000017577845?utm_source=tag-newest

4. Html-webpack-plugin

npm install html-webpack-plugin --save-dev (安装html-webpack-plugin插件 )

浏览器是不认识es6的语法: 我们可以在打包之前用babel
:安装babel-loader：npm install --save-dev babel-loader babel-core babel-preset-env webpack

css 的style和class 
npm install css-loader style-loader --save-dev

5. Friendly-errors-webpack-plugin

安装命令
npm install friendly-errors-webpack-plugin --save-dev

https://www.cnblogs.com/angelasp/p/10622283.html

6. copy-webpack-plugin

安装命令
npm install --save-dev copy-webpack-plugin
https://www.jianshu.com/p/43a4a980625b

7. extract-text-webpack-plugin

安装命令
npm install extract-text-webpack-plugin --save-dev
插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象 
https://www.npmjs.com/package/extract-text-webpack-plugin
https://www.cnblogs.com/dyx-wx/p/6529447.html

8. optimize-css-assets-webpack-plugin

安装命令
npm install --save-dev optimize-css-assets-webpack-plugin
https://www.cnblogs.com/songxia/p/10315463.html
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

问题1 IE报vuex requires a Promise polyfill in this browser问题解决

问题1：
IE报vuex requires a Promise polyfill in this browser问题解决 
在webpack.base.config.js文件中，使用

module.exports = {
   entry: {
     app: ["babel-polyfill", "./src/main.js"]
   }
};

module.exports = {
  entry: {
     app: './src/main.js'
  }
}