webpack2. npm install webpack webpack-cli --save-dev或者 -D 他是

ES Moudle 模块引入方式

webpack是一个模块打包工具

npm init -y 默认生成node环境配置

安装webpack npm install webpack webpack-cli -g(全局安装 不建议)

删除webpack npm uninstall webpack webpack-cli -g

webpack-cli的作用可以在命令行运行webpack npx webpack的命令

在项目里安装webpack

1.进入项目目录

2. npm install webpack webpack-cli --save-dev或者 -D

局部安装命令行 webpack -v 找不到需要 npx webpack -v

这样安装的优势 不一样的项目可以用不一样的webpack版本

webpack配置

创建 webpack.config.js

let path=require('path');module.exports={
mode:"development",//development输出代码不压缩 production输出后会压缩devServer: {  
  contentBase:'./dist', //自动刷新
   open:true,//自动打开浏览器
},entry:'./index.js', 
output: {        filename: "bundle.js",
       path: path.resolve(__dirname,'bundle') 
   }}

url-loader 会把图片转换成base64 配置limit会把大大图片复制过去，小大图片转base64

file-loader 复制移动过去

module: { 
   rules: [  
      {     
       test: /\.(png|jpg|gif)$/,   
       use: {         
           loader: 'url-loader',        
            options: {                
                    name: '[name]_[hash].[ext]',      
                    outputPath: 'images/',         
                    limit: 204800           
                     }   
             }    
        },    
        { 
           test: /\.(css|scss)$/,   
           use: [
                {loader: "style-loader"},     
                {loader: "css-loader",         
                      options: {           
                      importLoaders:2, //配置这个可以使sass中引入大sass文件也可以走下面两个loader      
                       modules:true //  css模块化      
 }   
                 },              
                 {loader: 'sass-loader'},
                {              
                  loader: 'postcss-loader',        
                  options: {                    
                          plugins: [                         
                                   require('autoprefixer')
                                    ({overrideBrowserslist: ['last 5 versions']})
                                    ]     
                           }             
                },          
                ]   
          }  
  ]},

配置 package.json

安装 webpack-dev-server npm install webpack-dev-server -D

  "scripts": {
  "dev":"webpack",  
  "watch":"webpack --watch", //监听自动打包   
  "start":"webpack-dev-server"    
  },

HtmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

plugin 可以在webpack运行到某一时刻到时候，帮你做一些事情

   output: {   
            publicPath: "www.wxb.com",    输出引入的文件加域名
            filename:'[name].js',       name 默认生成上面配置的文件
            path: path.resolve(__dirname, 'dist')  
  }}

sourceMap

他是映射关系，他知道dist目录下main.js文件96行实际对应的是src index.js的哪一行。

hmr 热更新 module.hot.accept('./number',()=>{ 执行需要热更新的代码})

tree shaking 引入啥打包啥没引入的自动删掉

tree shaking 只支持es module引入 import {add} from './math.js'

需要在 package.json 添加 sideEffects:false 或者 sideEffects:['*.css']

const merge = require('webpack-merge'); 合并代码

Code Splitting

Code Splitting为“代码拆分”，也就是说我们可以理解为将all in one的包在拆成多个包，当需要引用的时候再引用下载、加载，只是这种加载是通过webpack内部机制发起http请求实现的。我们将摸个不常用的大体积模块从包中分离出来，当包内的语句引用到了这个模块后，webpack会判断这个模块是被分离出去的，应当发起http请求拉取。不是不能拉向上模块，只是只拉和自己有渊源的模块。

SplitChunksPlugin分割代码

webpack将根据以下条件自动拆分代码块：

会被共享的代码块或者 node_mudules 文件夹中的代码块
体积大于30KB的代码块（在gz压缩前）
按需加载代码块时的并行请求数量不超过5个
加载初始页面时的并行请求数量不超过3个

Lazyload

前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一次性加载完毕，那肯定是要等到花都谢了，loading转的人都崩溃~。今天分享的是Lazyload技术是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

# ParallelUglifyPlugin优化压缩

webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。

webpack