webpack 入门（官翻）

Posted 2020-09-16 HAPPY海贝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 入门（官翻）相关的知识，希望对你有一定的参考价值。

0 建议最好全局先安装一下webpack

npm install webpack -g

1 新建一个文件夹，打开该文件夹，初始化package.json文件，安装好webpack依赖（都是基础的linux命令操作，必会）

mkdir webpack-demo && cd webpack-demo  //新建webpack-demo文件夹并打开该文件
npm init -y     //初始化package.json文件，-y可以省去一大通的默认回车设置
npm install --save-dev webpack   //添加到package.json的devDependencies中

2 程序根目录下创建 src/js 文件夹，新建index.js文件

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

  /* 用到了lodash插件中方法 */
  element.innerhtml = _.join([‘Hello‘,‘webpack‘], ‘ ‘);

  return element;
}

document.body.appendChild(component());

3 新建 index.html文件

<html>
  <head>
    <title>webpack 2 demo</title>
    <!--引入lodash插件，顺序必须在index.js之前-->
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

到目前为止，在浏览器中打开index.html文件，可以看到hello webpack，没有问题。但是此时任意的移动引得的js文件的位置，（如颠倒lodash和index.js的位置），页面就会报错。此时页面中才仅仅是只有两个js文件，若是文件比较多，依赖关系比较复杂的，更是麻烦。

接下来就是webpack改造的时候。

4 首先安装lodash依赖

npm install --save lodash

5 改造 index.js文件，在文件的顶部引入 lodash模块

import _ from ‘lodash‘;

function component () {
  ...

6 改造index.html文件，取消对lodash插件的引用，只引用一个bundle.js文件即可，该文件是原来的文件的一个合并汇总，具体如何合并，继续往下走。

 <html>
   <head>
     <title>webpack 2 demo</title>
　　//<script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
    //<script src="app/index.js"></script>
      <script src="dist/bundle.js"></script>
   </body>
 </html>

7 合并生成bundle.js文件

webpack src/js/index.js  dist/bundle.js

此时运行index.html文件仍然能正常运行。同第三步之后的效果一致。

除了上面这种方法，还可以通过webpack.config.js的方式进行改造。

8 新建webpack.config.js配置文件（path是nodejs中提供的一个关于路径的小工具）。该配置文件可以对模块的加载规则（webpack不仅可以处理js还有css等，一切皆模块），插件，其他的增强服务等等进行预配置。然后直接执行该配置文件也可以取得和上一个改造方法一样的效果。

var path = require(‘path‘);

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

webpack --config webpack.config.js  //执行该配置文件

至此，我们已经罗列了两种解决方法，一种是通过第七步合并生成bundle.js的方式，一种是通过配置文件的方式，当然也可以直接将配置文件添加到package.json的选项中，如下。

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

配置好了以后，直接运行

npm run build

同第八步的直接执行webpack 相关命令是一样的效果。

好了，第一篇入门导引到此结束！！！

以上是关于webpack 入门（官翻）的主要内容，如果未能解决你的问题，请参考以下文章

折叠屏手机优选，三星Fold3官翻机为何如此受热捧？

webpack入门——webpack 介绍

webpack4常用片段