前言：这两天在网上找了些视频和资料学习webpack，最后发现官网上的教程原来就写得很好，只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程，然后总结下这两天的对webpack入门的学习，写一下互相学习，英语好的就直接去官网看吧。（话说很久没学英语了，学好英语真的很重要）

1、安装 打开node，敲入命令行 ①全局安装

$ npm install webpack -g

②安装在项目中，将依赖写入package.json

$ npm init$ npm install webpack --save-dev

2、编译

在项目文件下 ①新建一个文件entry.js并输入内容：

document.write("hello world!");

②新建一个index.html

③node里敲命令，编译文件

$ webpack ./entry.js bundel.js

3、组件

entry.js是入口文件，一般还有各个组件模块，从而引用实现复用。 ①新建一个component.js文件，输入

module.exports = "It works from component.js";

②修改入口文件entry.js

//document.write("hello world!");document.write(require("./component.js"));

③node敲命令重新编译，然后去浏览器里刷新查看

$ webpack ./entry.js bundel.js

4、css-loader和style-loader以及wepack.config.js

css-loader用来处理CSS文件；style-loader将样式应用在CSS文件上 ①node里敲命令安装这两个模板

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

②新建一个style.css文件

body{     background:red;}

③更新修改entry.js

require("./style.css");document.write(require("./content.js"));

④在项目文件下新建一个webpack.config.js文件并输入

module.exports = {    entry: "./entry.js",    output: {        path: __dirname,        filename: "bundle.js"    },    module: {        loaders: [            { test: /\.css$/, loader: "style-loader!css-loader" }            //注意：这里的style和css后面都要加"-loader"后缀，官网上教程没有更新，详情：https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed        ]    }};

⑤node里敲命令编译

这个时候只需要敲webpack就可以了，因为Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js

$ webpack