webpack4.x版本各种常见配置，快来打造属于你自己的工作流

作者: 聪明的汤姆 | 来源:发表于2018-10-15 12:01 被阅读0次

更新日志

2018-12-05

提高热更新速度
修改html文件也触发热更新

逼逼两句

关于webpack是什么，这里不多说，webpack官方文档，让我直接进入正题吧!

1.最基础的配置

新建一个文件夹，就叫webpack吧，先安装主要依赖

npm install webpack webpack-cli --save-dev

让我们试试打包一个javascript文件看看，在src目录下创建index.js、message.js文件，在根目录创建index.html文件

message.js

export default function (message) {
  console.log(message)
}

index.js

import message from './message.js'

message('大家好，我是message函数')

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的第一个webpack程序</title>
</head>

<body>

  <script src="boundle.js"></script>

</body>

</html>

现在当然没有boundle.js文件啦，让我们用webpack将src/index.js打包成boundle.js吧

在根目录创建webpack入口文件webpack.config.js

webpack.config.js

module.exports = {
  // 入口
  entry: './src/index.js',
  
  // 输出
  output: {
    filename: 'boundle.js', // 文件名
    path: __dirname // 输出路径
  }
}

怎么运行呢？如果webpack、webpack-cli安装到了全局环境，那么直接在命令行直接输入webpack就可以进行打包了，现在我们webpack、webpack-cli是安装到了项目依赖中，所以得稍微配置一下

package.json

{
  "devDependencies": {
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
  },
  "scripts": {
    "build": "webpack"
  }
}

现在我们执行npm run build就相当于执行webpack命令了

npm run build

现在你可以看到，根目录下生成了个boundle.js文件，现在打开index.html，看控制台输出"大家好，我是message函数"

2. 打包自动生成html

意思就是，我们执行npm run build之后，可以自动生成index.html、index.js，并且该html里面自动引入index.js，现在我们可以把根目录下的index.html删掉了，以后用不上

安装依赖，html-webpack-plugin

npm install html-webpack-plugin --save-dev

webpack.config.js

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js', // 输出之后的js文件名
    path: __dirname + '/dist' // 输出路径，一般我们输出到dist文件夹
  },
  // 使用插件
  plugins: [
    // 生成html
    new HtmlWebpackPlugin({
      filename: 'index.html',
      title: '我是主页的标题',
    }),
  ]
}

现在运行

npm run build

可以看到在根目录下生成了dist文件夹

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我是主页的标题</title>
  </head>
  <body>
  <script type="text/javascript" src="index.js"></script></body>
</html>

3. 模板文件

新建template.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>我是模板文件</title>
</head>

<body></body>

</html>

配置

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './template.html'
  }),
]

4. 使用css

可以使javascript脚本中引入css文件，并且写入到html

npm install style-loader css-loader --save-dev

配置

module.exports = {
  module: {
    rules: [{
      test: /\.css$/, // 匹配.css文件
      use: ['style-loader', 'css-loader'] // 使用插件
    }]
  },
}

// index.js
import message from './message.js'
import './index.css'

message('大家好，我是message函数')

执行打包，打开生成的index.html文件，F12调试

可以看到自己写的css文件被javascript写入到head中，那如果你想像javascript文件一样外联的形式引入，该怎么做呢？

5. 分离css

npm install extract-text-webpack-plugin@next --save-dev

配置

let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  module: {
   rules: [{
      test: /\.css$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }]
  },
  plugins: [
    new ExtractTextWebpackPlugin('index.css')
  ]
}

执行打包

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我是主页的标题</title>
  <link href="index.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="index.js"></script></body>
</html>

6. 多页面入口

以上都是单页面入口，只允许配置一个html文件以及对应的javascript、css，那么如何配置多个页面呢？

配置

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].js?[hash]', // 生成的名字由entry中的属性决定，并且加上了版本号
    path: __dirname + '/dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      title: '我是主页的标题',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      title: '我是关于我们页面的标题',
      chunks: ['about']
    }),
  ]
}

执行打包

7. 多页面分离css

只需要把css名字动态化即可

index.js

import message from './message.js'
import './index.css'

message('大家好，我是主页')

about.js

import message from './message.js'
import './about.css'

message('大家好，我是关于我们')

配置

let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }]
  },
  plugins: [
    new ExtractTextWebpackPlugin('[name].css'), // css文件名字动态化
  ]
}

打包后，看dist文件夹目录

8. css浏览器自动补全前缀

npm install postcss-loader autoprefixer --save-dev

在根目录新建postcss.config.js文件

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

配置（css不分离写法）

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  }
}

配置（css分离写法）

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader']
      })
    }]
  }
}

9. babel

babel可以把es最新标准的代码转为es5代码，首先需要安装babel-core、babel-loader（7.1.5版本）、以及转换版本babel-preset-env

npm install babel-loader@7.1.5 babel-core babel-preset-env --save-dev

配置

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          cacheDirectory: true
        }
      }
    }]
  }
}

写一段ES6代码测试一下

import message from './message.js'
import './index.css'

let name = '主页'

message(`大家好，我是${name}`)

执行打包

10. API转换

babel默认只转换JavaScript语法，对于新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等是不会转换的。如果需要转换API，需要使用babel-polyfill

安装依赖

npm install babel-polyfill --save-dev

在你的javascript文件顶部引入

import 'babel-polyfill';
let set = new Set([1,2,3]);

11. 图片资源

webpack处理图片、字体、音乐、视频等资源时（javascript中require，css的背景图设置等），需要安装file-loader

cnpm install file-loader --save-dev

配置

module.exports = {
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
      loader: 'file-loader',
      query: {
        name: '[name].[ext]?[hash]'
      }
    }]
  }
}

执行打包

12. 清除dist文件夹

每次打包前都能自动清除dist文件夹下的文件

npm install clean-webpack-plugin --save-dev

配置

let CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ]
}

13. 分文件夹管理

现在打包之后dist文件夹，太乱了，我们需要在里面用css、js、images文件夹进行分类管理

配置

let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  output: {
    filename: 'js/[name].js', // 在文件名前面加上目录名称即可实现
  },
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
      loader: 'file-loader',
      query: {
        name: '[name].[ext]?[hash]',
        outputPath: 'images' // 配置图片生成的目录
      }
    }]
  },
  plugins: [
    new ExtractTextWebpackPlugin('css/[name].css') // 配置css文件生成的目录
}

执行打包

舒服多了

14. 压缩分离出来的css文件

大家应该发现了，javascript文件自动压缩了，无需配置，但是分离出来的css文件没有自动压缩

npm install optimize-css-assets-webpack-plugin --save-dev

配置

let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  plugins: [
    new OptimizeCssAssetsPlugin()
  ]
}

15. 开启本地服务器，并且设置热更新

热更新是webpack的一个特性，通过无刷新实现代码更新

npm install webpack-dev-server --save-dev

package.json

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

配置

let webpack = require('webpack')

module.exports = {
  mode: 'development', // 开发模式，热更新速度提高
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 启用HMR
  ],
  devServer: {
    contentBase: __dirname + '/dist', // 默认目录
    port: 3000, // 端口
    open: true, // 运行时自动在浏览器打开
    hot: true // 开启热更新
  }
}

启动服务（是不是感觉像极了vue-cli项目）

npm run dev

然后浏览器会自动打开http://localhost:3000

默认访问index.html

输入http://localhost:3000/about.html访问关于我们

注意，现在修改javascript，css代码才能触发热更新（css不分离模式才触发），html模板文件则不能

16. 让修改html模板文件也触发热更新（必须要有模板文件）

npm install raw-loader --save

新增配置

let webpack = require('webpack')

module.exports = {
 module: {
    rules: [{
      test: /\.(htm|html)$/,
      use: [
        'raw-loader'
      ]
    }]
  },
}

在入口文件导入模板文件

import '../index.html'

点击下载模板(暂无添加修改html文件的代码，自己看着第16步自行添加喔)

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦 💨

image
微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习 🌘

webpack4.x版本各种常见配置，快来打造属于你自己的工作流

更新日志

逼逼两句

最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读