webpack 学习笔记

webpack 是一个模块打包工具

1. 安装

首先安装node
其次，npm init
然后，安装webpack :

1. 全局安装
   命令：npm install webpack webpack-cli -g
   查看版本：webpack -v
   不推荐使用，不同的项目使用不同版本的webpack
2. 所在项目中安装
   命令：npm install webpack webpack-cli -D (npm install webpack webpack-cli --save-dev)
   查看版本：npx webpack -v
3. 安装指定版本
   命令：npm install webpack@4.1.5 -D

如果安装失败，可打开手机热点

2. loader

1. url-loader
2. file-loader
3. style-loader
4. css-loader
5. postcss-loader

3. plugins

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

1. HtmlWebpackPlugin( link)
   会在打包结束后，自动生成html文件,并把打包生成的js自动引入到这个html中

//安装
npm install --save-dev html-webpack-plugin

//用法
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html' //模版文件
  })]

2. CleanWebpackPlugin
   打包之前，删除原有的dist文件

//安装
npm install clean-webpack-plugin -D

//用法
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [new CleanWebpackPlugin()]

4. SourceMap ( link)

它是一个映射关系，它知道打包之后报错的地方，转化为实际文件中的位置

module.exports = {
	mode: 'development',//production,
	devtool: 'source-map' 
	//development时，cheap-module-eval-source-map最佳
	//production时，cheap-module-source-map最佳
  }

5. webpack dev serve ( link link2)

当启动服务时，自动打开页面，locahost:8080。代码更改后，还可以自动刷新浏览器。

devServer: {
    contentBase: './dist',
    open: true,
    port: 8080
  }

6. Babel 处理 ES6 语法

1. 首先安装babel-loader link
   初步翻译

npm install --save-dev babel-loader @babel/core

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

2. polyfill link.
   解决低版本浏览器对有些语法不认识问题

npm install --save @babel/polyfill

两种配置方案

1. 业务代码时

options: {
	"presets": [['@babel/preset-env',{
          "targets": {//语法需要支持的浏览器
            "chrome": "67",
            "safari": "11.1"
          },
          useBuiltIns: 'usage'//只需要编译出代码中用到的es6语法
        }]]
 }

2. 类库项目,babel不会污染全局环境

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

npm install --save @babel/runtime-corejs2

// 创建 .babelrc 文件
"plugins": [["@babel/plugin-transform-runtime",{
          "corejs": 2,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
        }]]