webpack 入门(官翻)

Posted 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 介绍

webpack入门——webpack 介绍

webpack4常用片段

webpack书本总结,入门webpack必备

webpack书本总结,入门webpack必备