webpack的安装及使用

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

那么同样的在安装webpack之前，我们要确保本地环境已经安装了node.js。

由于npm安装较慢，我们也可以选择用cnpm进行安装。安装步骤及方法都一样，在这里用npm进行安装。

首先，我是直接用npm init初始化生成一个package.json文件，当然这个文件也可以手动自己创建。

然后全局安装webpack：

npm install webpack -g(如果你的电脑已经全局安装过了就不用再执行这一步了)

全局安装完成之后创建你的项目文件夹，然后cd进去，再在你的项目文件夹里局部安装webpack：

npm install webpack -D

而在webpack4.0开始，还需要安装webpack-cli。同样的先全局后局部。

安装完成以后打开你的package.json文件

在红色标记的地方添加上里面的内容。（copy红框里的这两句）

再创建一个文件名的webpack.config.js的文件（作用相当于gulp里的gulpfile.js）

里面的内容要自己手动进行输入。

如上图我们需要创建一个src和dist的文件夹。然后在同级目录下创建一个html文件，在src下的js文件夹中创建一个js文件，在这里我们统一命名为index.html何index.js。创建完成之后在命令行继续安装自己所需要的加载器（预处理），在这里把常用的统一装一下：

npm install style-loader css-loader sass-loader babel-core babel-loader babel-preset-env vue-template-compiler vue-loader -D

OK，安装完成，在这里需要注意的是，要安装sass-loader,必须先安装node-sass，否则sass-loader不会生效:

npm install node-sass -D

若是安装不上就使用cnpm装。

安装好之后就可以运行了。

这两个文件的内容编辑好以后在命令行里输入npm run dev

执行成功！之后再在命令行里输入：

npx webpack --watch

执行此命令以后，再修改资源文件，webpack会自动打包。

公众号：Coder 杂谈，欢迎关注