从零搭建webpack环境

2018-10-17 114 阅读1分钟

初始化webpack环境

初始化package.json文件 npm init
全局安装webpack(npm i webpack -g)和webpack-cli(npm i webpack-cli -g)

HtmlWebpackPlugin插件使用的简单例子

HtmlWebpackPlugin用法说明

创建webpack.config.js文件

输入以下代码

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack'); //不引入webpack会造成HtmlWebpackPlugin路径错误

module.exports = {
  entry: './main.js',//入口文件
  output: {
    path: path.resolve(__dirname, './dist'),//输出的路径
    filename: 'main_bundle.js'   //输出的js文件名称
  },
  plugins: [new HtmlWebpackPlugin()]   
};

安装html-webpack-plugin (使用命令npm install html-webpack-plugin -D)
main.js（入口文件里面可以为空）
运行webpack --config webpack.config.js 命令执行
这将会生成dist目录该目录下有index.html 和 index_bundle.js 两个文件。其中index.html文件代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="main_bundle.js"></script>
  </body>
</html>