我的WebPack入门（一）

liuchengxu 发布于2019-08-21 15:20 / 1224人阅读

摘要：因为这里我的文件夹名字起的叫，所以默认生成的中的就是，而是关键字会导致，只需要打开把随便改一下即可。其实关于都还有很多参数配置和方法，不过对于入门，在上面这些东西搞明白后，就已经可以跑起来一个简单的流程了。

WebPack已经火了好久，几乎已经成为一个前端的必备技能，先翻译官网两句话。

WebPack是一个灵活的、可扩展的、公平的、可用于生产环境的、开源的模块打包器。

WebPack V1版本已经过时，请开发者们升级到V2。

这篇笔记是基于WebPack V2.2.1 开始。

安装（Installation）

npm install webpack -g 全局安装webpack，这样可以在全局使用webpack命令；

新建webpack文件夹，Terminal/cmd切换到webpack文件夹下，执行npm init -y生成package.json文件

-y: init过程中会有一堆繁琐的问题，比如包名、作者、描述、依赖等一些东西，通过-y命令可以直接跳过，默认全部“是”。
PS：因为这里我的文件夹名字起的叫webpack，所以默认生成的package.json中的name就是webpack，而webpack是关键字会导致err，只需要打开package.json把name随便改一下即可。

npm install webpack --save-dev 如果想要安装特定版本的webpack可以使用 npm install webpack@ --save-dev，将version换成想要的版本号即可。

--save：save 的意思是把安装信息保存到 package.json中，打开package.json会发现多了devDependencies项已经把webpack添加进去了："devDependencies": {"webpack": "^2.2.1"}；

-dev：dev的意思是当前安装插件是放在"devDependencies"中，表示是开发时所需依赖，正式生产环境所需依赖不需要添加-dev，是会放在"Dependencies"中

开始（Getting Started）

首先建好文件目录

webpack.config.js：类似gulpfile.js，配置相关设置，我觉得放在根目录下会合适一些，在配置path时会方便一些，执行webpack命令时会默认搜索webpack.config.js文件，也可以通过指定 --config指定其他文件为配置文件

app：存放项目文件模块

PS：在模块化开发中，这种文件目录是不推荐的，需要依模块来划分文件目录

dist：存放webpack处理后的文件

新建JS/css文件

hello.js

const msg = "Hello ";

export default class Hello {

        constructor() {
            this.say = this.say.bind(this);
        }

        say (word)  {
            document.write(msg + word);
        }

        ask ()  {
            document.write("Say Something Please");
            setTimeout(() => this.say("webpack"), 1000);
        }

}

- index.js

import css from "./index.css";
import Hello from "./hello.js";

new Hello().ask();

- index.css

html,body{
    margin:0;
    padding:0;
}
body{
    background:red;
    color: #fff;
    font-size: 40px;
}

3.安装部分所需依赖

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015：因为用到了es6的语法，所以我们需要对es6语法进行转换
npm install style-loader --save-dev css-loader --save-dev： 安装处理css的loader

4.配置webpack.config.js

const path = require("path");

module.exports = {
    entry: "./app/index.js",
    output: {
        filename: "bundle.[hash].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            },
            {
                test: /.css$/,
                loaders: ["style-loader", "css-loader"]
            }
        ]
    }
};

path: path是Node中的内置对象，也是Node的核心模块之一，这里引入path对象，主要是为了控制生成文件的目录path.resolve(__dirname, "dist")这句话中，resolve会将参数中的路径或路径片段的序列解析为一个绝对路径，__dirname表示当前文件模块所在的完整的绝对路径，这样即使项目迁移，地址变更，只要保证相对路径正确即可。
context：上下文，这里省略了，默认为当前文件模块的绝对路径，下面的entry和output中的路径都是相对于context上下文的相对路径
entry：入口文件，如果有多个不同的入口文件，可以写成对象的形式
output：配置webpack打包后输出文件的参数
filename: 输出的文件名，"bundle.[hash].js"中，hash是webpack会生成一个hash值，这里还可以有的写法如："[name].[hash].js"指的是 入口文件的名字.hash值.js hash也可以改成chunkhash，如果entry中有多个入口文件，则每一次某个文件的改动都会引起所有输出文件hash值得改变，而chunkhash只会影响有改动模块文件。
path: 生成文件的输出路径
modules: 配置不同文件所需要的loaders以及插件配置，至于什么文件需要什么loaders，在官网和很多地方都可以找到说明。

其实关于output/modules都还有很多参数配置和方法，不过对于入门，在上面这些东西搞明白后，就已经可以跑起来一个简单的流程了。更多的知识，在后期遇到其他的痛点时会去搞明白的。

我的WebPack入门（二）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88156.html

我的WebPack入门（二）——html-webpack-plugin

摘要：可以根据你设置的模板，在每次运行后生成对应的模板文件，同时所依赖的也都会被引入，如果中含有值，则生成的模板文件也会引入正确版本的文件。上一节的入门中，只是跑通了一个很简单的webpack项目的流程，对其中的参数以及实战运用中的一些用法并不太清楚，虽然目前工作项目中并没有用起webpack，不过觉得还是需要再去摸索一番，以便可以更清楚的用起这个工具。上一节最终运行webpack命令，...

wmui 2019-08-20 14:50 评论0 收藏0
webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0
webpack入门学习手记（五）

摘要：另外需要指定这个参数，表示在配置的数值以下的图片才进行编码，超过的不进行处理。代码如下所以过程就是引入了，然后进行打包处理，生成和。目前这个入门学习手记到这里就结束了。完相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 评论0 收藏0
webpack入门学习手记（一）

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

mengera88 2019-08-23 14:01 评论0 收藏0
Webpack 4.X 从入门到精通 - devServer与mode（三）

摘要：同时它还提供了自动刷新热更新等功能，使开发变得非常方便。的到来减少了很多的配置，它内置了很多的功能。上一篇文章里详细介绍了一下插件的用法，这一篇文章接着丰富module.exports里的属性。如今的前端发展已经非常迅速了，伴随而来的是开发模式的转变。现在已经不再是写个静态页面并放在浏览器里打开预览一下了。在实际的开发中会经常需要使用http服务器，比如之前的ajax，想要看到效果就...

王伟廷 2019-08-23 10:47 评论0 收藏0