【学习笔记】关于如何安装并使用webpack

以下是我整理的关于如何安装，使用webpack的步骤：

1.首先要安装node.js。直接去官网下载就可以了，安装步骤也很简单。

2.创建一个项目文件。例如我在D盘创建可一个文件夹 webpack-study,里面有一个子文件夹webpack-demo。

3.在电脑上打开cmd，进入到webpack-demo文件夹下,我主要是windows系统。

>s:   点击Enter

>cd webpack-study   点击Enter

>cd  webpack-demo  点击Enter 

4.初始化webpack。

>npm init    点击Enter

5.安装webpack,直接输入指令npm install webpack --save-dev ,默认安装最新的webpack;可以输入webpack的版本号来安装想要的版本，npm install webpack@1.12.x --save-dev。

>npm install webpack --save-dev

6.安装完后，在编辑器里面打开项目文件，发现没有webpack.config.js文件，这时要手动创建一个webpack.config.js文件，然后在里面进行配置，这样才可以正确使用webpack了。关于webpack的配置，下面是一个简单的例子：

module.exports={

entry:' ./xxx.js ',

output:{

filename:' [name].js ' ,

path:' ./XX ' 

}

}

如果安装的是webpack2，那么webpack.config.js配置中output里面的path:'./XX' 要改为成path:_ _dirname+'./XX'。两个下划线加上一个dirname。

7.在输入自己需要的配置后，用cmd执行webpack。注意：此时要配置package.json文件。否则输入npm run webpack命令会报错。

package.json中需要在"scripts"：{}里面加上 "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"。然后就可以直接执行：

>npm run webpack