类库分开打包

1. 为什么？

2. 怎么做？

        webpack.optimize.CommonsChunkPlugin

CSS单独打包分离

    1.为什么？

    浏览器缓存

2.如何做

        extrack-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next
升级extract-text-webpack-plugin为4.0best版本，然后将contentHash改成Hash

1. npm init初始化项目，默认配置，自动生成package.json
   

2. cnpm i webpack vue vue-loader/cnpm i css-loader vue-template-compiler

3. 在package.json中添加"build": "webpack --config webpack.config.js";添加webpack.config.js并配置

4. cnpm run build报错，修改如下：

   1. 添加const {VueLoaderPlugin}=require('vue-loader');

      module.export={...,plugins:[new VueLoaderPlugin()]...}

   2. 添加module.export={...,module:{rules:[{test:/.vue$/,loader:'vue-loader'},{test:/.css$/,use:['vue-style-loader','css-loader']}]}}

5. cnpm run build提示：需安装webpack-cli，通过cnpm i --save-dev webpack-cli@3.3.0进行安装

6. cnpm run build警告：the 'mode' option has not been set,webpack will fallback to 'production' for this value....修改package.json中"build": "webpack --config webpack.config.js"为"build": "webpack --mode development"

7. cnpm run build正确
   

1.cnpm init

2.cnpm i webpack vue vue-loader

webpack.config.js配置文件是同时用于开发环境和正式环境，所以要根据环境来判断一些配置。判断就通过在package.json的scripts中，通过NODE_ENV来定义不同的环境变量。而cross-env包的作用就是，统一不同操作系统下定义环境变量的方法。

遇到两个错误 一个是配置好loader之后还报错 

Make sure to include VueLoaderPlugin in your webpack config.

添加

const { VueLoaderPlugin } = require('vue-loader');
……
plugins: [        new VueLoaderPlugin(),
    ],

添加完之后 运行 报错

Module parse failed: Unexpected character '#'

添加

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { 
 // ... 
  module: {  
    rules: [  
        {    
            test: /\.vue$/,    
            loader: 'vue-loader'  
            },      
        {       
        
         test: /\.css$/,       
          use: ['style-loader','css-loader']   
         }  
        ] 
      } 
       plugins:
        [ 
           new VueLoaderPlugin()
           ]
    }

下一节  添加 sytle-loader 报错   需要先安装  

npm i style-loader

comnfig.devtool =  '#cheap-module-eval-source-map' 将vue的代码映射到页面上，从而达到调试页面的代码而修改对应的vue代码

vue-项目如何去定制？

小伙伴们，大家好，针对老师的视频教程，我整理了一份完整的源码，源码还有详细的注释和笔记,供大家学习时参考。

GitHub下载地址：https://github.com/Jasonccj/vue-webpack-todo

上一节：可复用的代码抽成模块。