webpack的那些事儿

无论是vue-cli仍是react-sprite，其实都是基于webpack实现的。试想，若是没有脚手架，你本身能搭一个吗？看完这篇博客，让你明白webpak都有些什么东西 

 webpack其实没有那么神奇，就是一个打包工具，并且它自己只能打包js，而图片，css，html其实都是依靠它的loader和plugin完成的。 

webpack.config.js文件，看名字就知道它是webpack的配置文件。该文件通常包括：入口entry，出口output，loader和插件plugin

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  }}复制代码

来解析下上面的代码，

第一行的path实际上是node的核心模块，webpack其实就是基于node的产物，你的电脑要是没有node，你也装不了webpack的。 

接下来会向外暴露： 

mode能够指定是development环境仍是production环境。脚手架没有这一项，由于它已经分了dev.conf.js和prod.conf.js。 

entry指定你要打包的入口文件，

output指定你要打包到哪和打包文件的名字。

module模块通常用来设置你代码中要打包的css，图片之类的loader。

上面就是解析css的loader，确定有人好奇为何会有三个： 

style-loader：将会建立style标签，将样式放到页面中 

css-loader：将css代码转成js能接受的字符串 

post-loader：寻找那些须要浏览器兼容加前缀的样式，好比-webkit-，你没加，但loader会帮你补全，是否是很省心。这个loader有点不同的是他依赖一个autoprefixer的配置文件。

这也就能解释为何你的项目中引入less，sass之类的扩展语言要写三个loader。  

注意：这三个loader的顺序不能错，loader是从右往左执行的。 接下来的devtool不是必须的，他会保留代码编译前的模样，方便调式，上线必定要关掉，否则会让你打包的大小增大不少。  

本身配置一个webpack：

上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代码，postcss.config.js就是postcss-loader须要的配置文件

//1.js
import '../css/1.css'
console.log(111)复制代码

//postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {  plugins: [    autoprefixer  ]}复制代码

//1.css
#div1 {
  width: 200px;
  height: 200px;
  transition: 1s all ease;
  background-color: rgb(148, 148, 148);
}
#div1:hover {
  transform: rotateY(60deg)
}复制代码

此时，在命令行中运行webpack，就会生成上面的build文件夹，打开index.html，你会发现，这就是咱们本身写的css和js。这样就完成了打包，是否是很简单？

咱们可能还会好奇webpack为何可以起一个服务环境，实现热更新等功能，这就不能不说webpack-dev-server了。

实现热更新：

这个不须要咱们配置，但须要依赖，因此咱们要：

npm i webpack webpack-cli webpack-dev-server复制代码

注意：这里的启动命令要在package.json文件里配置

{  
"scripts": { 
   "dev": "webpack-dev-server --progress --hot",  
},  
"devDependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1", 
   "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }}复制代码

此时，你在命令行输入npm run dev，会发现你的项目已经监听8080端口啦

若是要配置webpack-dev-server，也能够在webpack.config.js中进行配置:

devServer:{
    hot: true,        //设置热更新
    host: 'localhost', //可选，ip
    port: 3000, //可选，端口
    contentBase:path.resolve(__dirname,'build'), //可选，基本目录结构
    compress: true, //可选，压缩    proxy: {
        '/api': {
            target: 'http://localhost:8081',
            pathRewrite: {'^/api': '/data'} 
//原本是反向代理去http://localhost:8081/api，rewrite以后就反向代理去http://localhost:8081/data
        }
    }}复制代码

到目前为止，咱们生成的index.html文件其实仍是本地文件，那么咱们如何生成一个服务器访问的html文件呢？这里就要引入html-wepack-plugin插件了。

npm i html-webpack-plugin -S复制代码

plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),    
new webpack.HotModuleReplacementPlugin({})
  ]}复制代码

这里我把我build文件夹下的index.html。

到这里，一个小小的脚手架雏形其实就有了。剩下的就是配置各类各样的loader啦

由于loader的配置都是大同小异，这里就不作过多介绍。

具体能够戳这里www.webpackjs.com/loaders/

附上完整的webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  
},  
module: {
    rules: [
        { test: /\.css$/,      use: ['style-loader', 'css-loader', 'postcss-loader']    }
    ]
  },
  devServer: {
    host: 'localhost', //可选，ip
    port: 3000, //可选，端口
    contentBase: path.resolve(__dirname, 'build'), //可选，基本目录结构
    compress: true, //可选，压缩 hot: true },
  plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),
    new webpack.HotModuleReplacementPlugin({})
  ]}复制代码