基于webpack4制作项目开发的demo配置(含babel、l

现在的前端开发基本上都是基于vue或者react的开发，而且大部分都是基于别人已经写好的基础全家桶，已经配置好了webpack、less/sass、babel等等其他插件，但是某些时候需要自己更改webpack配置的话，总避免不了去查issue，有些时候呢，比较简单的页面，又不想用vue/react来写，但是需要用到webpack的打包(可以使用es6、自动打包等等很爽的特性)，在写这个demo的时候顺便温习了以下webpack的使用。

项目初始化

新建文件夹 webpack4-demo，然后用npm命令初始化

mkdir webpack4-demo
cd webpack4-demo
npm init
# 之后输入一些项目信息

项目开发依赖安装

在构建这个项目的时候需要一些必要和其他辅助类的开发依赖包，比如postcss(可以import或者@import引入css))、autoprefixer(css自动添加浏览器兼容)、babel(es6代码转译，自动天机爱polyfill)、less、uglifyjs(混淆压缩js)，在package.json的devDependencies下添加这些依赖。

  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.2",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4"
  },

项目文件结构设置

在webpack4-demo项目中创建如下的目录结构
<img src="/images/webpack4/project-structure.png" class="" />
各配置文件及路径说明：

config/ # webpack配置文件目录
config/webpack.base.config.js # webpack通用/基础配置
config/webpack.dev.config.js # webpack开发环境下的配置
config/webpack.prod.config.js # webpack 生产环境的配置
dist/ # webpack打包文件的目录
src/ # 源码目录
src/main.js # 入口文件，可自行定义文件名，与webpack中的entry处的配置一致
.babelrc # babel的配置
.editorconfig # 编辑器的配置
.gitignore # git忽略文件
.postcssrc.js # postcss配置插件，如 post-import、autoprefixer等插件
.index.html #html文件结构

package.json是npm项目依赖管理，在文件的底部需要添加如下的autoprefixer的配置

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

配置文件具体设置

本项目的配置主要点在config文件夹下的webpack配置，其他的都是webpack的插件的配置文件，部分的配置说明以下
webpack.base.config.js

  module: {
    // 配置webpack各种loader
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: [resolve("src")]
      },
      {
        test: /\.less$/,
        use:[
            "style-loader",
            {loader: "css-loader",options:{sourceMap: true, importLoaders: 1}},
            "postcss-loader",
            "less-loader"
        ]
      },
      {
        test: /\.css$/,
        use:[
            "style-loader",
            {loader: "css-loader",options:{sourceMap: true, importLoaders: 1}},
            "postcss-loader"
        ]
      },

    ]
  }

webpack.dev.config.js

// 这里需要引入webpack的merge模块，并且在这里配置dev-server
module.exports = merge(baseWebpackConfig, {
  // webpack-dev-server相关配置
  devServer: {
    hot: true,
    host: process.env.HOST || '0.0.0.0',
    port: process.env.PORT || '8000',
    publicPath: '/'
  },
  // webpack dev模式下的插件配置
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
      })
    ]
})

webpack.prod.config.js

    // webpack打包时的插件配置
    plugins:[
        // 清理dist目录
        new CleanWebpackPlugin([distPath],{root: path.resolve(__dirname, '../')}),
        // 混淆压缩js
        new UglifyJSPlugin(),
        // html处理
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeAttributeQuotes: true
              // more options:
              // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency'
          })
    ]

其他webpack的插件配置及完整的配置可以去Git查看

webpack配置的使用

在配置完成之后，yarn start 没有错误，那么就可以写代码了。
在src/main.js文件中可以引入css/less文件，可以使用各种ES5语法

import './styles/main.less'
import './styles/index.css'

let arr = [1,3,4,5]
arr.map(item=>{
    console.log(item)
})
let test = document.querySelector('#test')
setInterval(()=>{
    test.innerHTML = (Math.random() * 100).toFixed(2)
},1000)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack4 demo</title>
</head>
<body>
    <div class="main" id="app">
        webpack4
    </div>
    <p id="test" style="text-align:center"></p>
</body>
</html>

在改变js代码之后，浏览器自动刷新，但是改变index.html的文件候会重新编译，但是不会自动刷新浏览器