webpack 4 使用示例（一）

我将在这篇文章着重介绍最基本的配置示例。介绍完之后会以项目的形式展示其他使用的源码。

1，基本示例：

新建一个项目

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

给项目中添加index.html和 src/index.js文件。此时目录：

 webpack-demo
  |- package.json
+ |- /src
+   |- index.js
+ |- /dist
    |-index.html

src/index.js

 import _ from 'lodash';

  function component() {
    var element = document.createElement('div');

   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

此时，index.js依赖了lodash库，我们把依赖加到packge.json

npm install --save lodash

此时，在命令行输入：

npx webpack

会发现在dist目录下出现一个main.js 打开index.html 会显示 Hello webpack

npx命令：npx介绍：方应杭

npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！

因为webpack入口文件默认是/src/index.js 出口文件是/dist/main.js 所以即使没有写webpack.config.js配置文件。一样通过webpack可以打包好文件。

源代码

2，使用配置文件webpack.config.js

配置内容：

var path = require('path')

module.exports = {
  entry:'./src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist')
  }
		
}

再在packge.json 中加入:

build": "npx webpack --config webpack.config.js"

此时，安装依赖，运行npm run build 后，会得到和demo1一样的结果。源代码：demo2

3，loader使用的例子。css 和image载入。

加载css分为两种情况，一个是style这种内联的，一种是单独的css文件。因此loader也开发了两种：style-loader和css.loader

加载image通过file-loader。

首先在命令行安装这几个依赖模块。

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

然后在配置文件中，添加这几个loader

  module: {
    rules:[
      {
        test: /\.css$/,
	    use: [
	      'style-loader',
	      'css-loader'
	    ]
      },
      {
        test:/\.(gif|png|jpg)$/,
	    use: ['file-loader']
      }
    ]
  }

配置完成，现在就可以在index.js中使用这几个模块

 import _ from 'lodash';
 import './index.css';
 import picture from './hsq.gif';

  function component() {
    var element = document.createElement('div');

   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('colorRed');

    var image = new Image();
	  image.src = picture;
	  element.appendChild(image);

    return element;
  }

  document.body.appendChild(component());

任务完成。此时运行 npm run build 就可以看到css文件的加载效果，和图片的加载效果。

项目源码： demo3

4. 插件的使用举例。

HtmlWebpackPlugin

自动生成一个html文件，自动生成HTML文件有两个明显的好处：1，方便，不必自己写。2，html依赖的脚本的文件名如果改动，那么不必再去手动改动html文件的依赖。

webpack.config.js

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

安装相关插件模块，在配置文件中完成相关配置后，既可以不写html文件而自动生成了。

源码地址：demo4

总结:

截至目前，使用webpack的4个核心概念，已经可以确定的解决各种基本问题了。但，还是给人一种说不上的感觉，为啥和人家vue-cli差那么多，热更新也没。

所以，这个问题是下一篇要讲的东西。