webpack------整体的搭建

1.初始化项目

1.生成package.json配置文件

npm init -y

2.安装webpack webpack-cli

npm i webpack webpack-cli -D

3.创建webpack.config.js

const path = require('path');

module.exports = {
	mode: development开发环境 production生产环境 none
  mode:'development',
  entry:{
    main:'./src/index.js'
  },
  output:{
    filename:'[name].js',
    path:path.resolve(__dirname,'dist')
  }
}

4.配置package.json中的script命令

"scripts": {
   "build":"webpack"
  }

5.配置process.env.NODE_ENV

为了后期区分开开发/生成的配置项
第一种

"scripts": {
   "build":"set NODE_ENV=production && webpack"
   'cross-env NODE_ENV=production && webpack' (cross-env是个插件 兼容不同系统的 window的话 用set就好 )
  },
console.log(process.env.NODE_ENV) //production 

第二种

module.exports可以接受一个函数 参数是env

webpack.config.js

 module.exports = (env)=>{
   console.log(env.production); //undefined
 }

"scripts": {
	给env设置一个production属性 
   "dev-build": "webpack --config ./build/webpack.common.js",
    "dev": "webpack-dev-server --config ./build/webpack.common.js",
    "build": "webpack --env.production --config ./build/webpack.common.js"
  },

接下来 就可以通过env.production 的有没有 来区分生产还是开发

module.exports = (env)=>{
  if(env && env.production){
    return merge(commonConfig,prodConfig);
  }else{
    return merge(commonConfig,devConfig);
  }

}

---

2.配置webpack-dev-server

webpack-dev-server：一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改
启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

npm i webpack-dev-server -D

1.配置package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

2.webpack-dev-server配置参数

下面只是配置了一些项目常用的配置项

devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: '8080',
    open: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws:true,
        secure:true,//https
        changeOrigin:true,
        pathRewrite: { '^/api': '' }
      }
    }
  }

---

3.配置loader

1. css相关的loader css-loader style-loader

loader执行顺序：从右到左，从下到上。

npm i css-loader style-loader  -D

index.js

import './css/index.css';

webpack.config.js
module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

2. scss相关的loader

npm i node-sass sass-loader -D

index.js

import './css/indexScss.css';

webpack.config.js
module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader',
          {
            loader:'css-loader',
            options:{
              importLoaders:2, 多层级嵌套的文件 webpack不会每次都执行这么loader 这个属性可以让每个scss页面都执行以下2个loader
              多个loader 对应的值也是loader的个数（除了style-loader css-loader之外的个数）
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
      }
    ]
  }

3. postcss-loader 扩展css （浏览器兼容前缀等）

npm i postcss-loader -D

npm i autoprefixer -D

新建一个配置文件 postcss.config.js

postcss.config.js

module.exports = {
  plugins:[
    require('autoprefixer')
  ]
}

package.json

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

效果：

---

4. 图片，字体等文件loader

npm i url-loader file-loader -D

rules:[
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // placeholder 占位符 打包后的文件名称 还是跟之前的一样 扩展名也是一样
              name: '[name].[ext]',
              outputPath: 'img/',
              // 小于则变成base64 打包到js里面
              limit: 2048
            }
          }
        ]
      },
      {
        test:/\.(eot|ttf|svg)$/,
        use:{
          loader:'file-loader'
        }
      }
    ]

---

4.babel

将es6等高级语法转换为浏览器能识别的语法。

npm i babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/plugin-transform-runtime  @babel/runtime  @babel/runtime-corejs2 -D

• babel-loader 是对应的loader 让webpack和babel之间可以沟通了 但babel-loader并不会改变es的语法
• @babel/core 是babel的核心语法库
• @babel/preset-env 是最终将es6转为es5的库

{
 	test:/\.js$/,
   exclude:/node_modules/,
   loader:'babel-loader',
   options:{
     presets:["@babel/preset-env" ]
   }
 }

项目根目录添加 .babelrc 文件

{
   targets, useBuiltIns 等选项用于编译出兼容目标环境的代码
   其中 useBuiltIns 如果设为 "usage"
   Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill
   而无需在代码中直接引入 import '@babel/polyfill'，避免输出的包过大，同时又可以放心使用各种新语法特性。

  "presets":[
    ["@babel/preset-env",{
      "targets":{
        "chrome":"67"
      },
      "useBuiltIns":"usage" 
    }]  
  ],
  "plugins":[
    ["@babel/plugin-transform-runtime",{
      "corejs":2,默认为false 因为这个设置了值 所以需要用到 @babel/runtime-corejs2
      "helpers":true,
      "regenerator":true,
      "useESModules":false
  }]
]
}

---

5.plugin

webpack相关插件配置

1.html-webpack-plugin

作用：htmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个HTML文件中。

npm i html-webpack-plugin -D

plugins:[
    new htmlWebpackPlugin({
      template:'index.html'
    })
  ]

2.clean-webpack-plugin

删除指定文件夹（打包文件夹）里的文件，防止打包后还有原先的文件存在

npm i clean-webpack-plugin -D

const {CleanWebpackPlugin}  = require('clean-webpack-plugin') ;

plugins:[
    new CleanWebpackPlugin()
  ]

3.copy-webpack-plugin

一个完整的项目，不仅有开发依赖的各种文件需要打包上传到服务器上，也许还会有各种开发文档，项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译，也要上传到服务器上，以方便预览。

npm i copy-webpack-plugin -D

// 在头部引用中添加以下代码
const copyWebpackPlugin = require('copy-webpack-plugin');

// 在 plugin 中 添加以下代码
new copyWebpackPlugin([{
    from:path.resolve(__dirname+'/static'),// 打包的静态资源目录地址
    to:'static' // 打包到dist下面的static
}]),

---

6.devtool

devtool配置5个关键字说明

Source map 是通过webpack里面的 devtool来配置的，具体的配置参数有如下几种：

• eval： 使用eval包裹模块代码
• source-map： 产生.map文件
• cheap：不包含列信息，也不包含loader的sourcemap
• module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
• inline：将.map作为DataURI嵌入，不单独生成.map文件。

推荐配置如下

development模式：cheap-module-eval-source-map
production模式：cheap-module-source-map

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map'
  mode: 'production',
  devtool: 'cheap-module-source-map'
  }

---