您现在的位置:首页 >> 前端 >> 内容

安装并使用webpack

时间:2017/4/4 9:18:00 点击:

  核心提示:安装并使用webpack:以下是我整理的关于如何安装,使用webpack的步骤:1.首先要安装node.js。直接去官网下载就可以了,安装步骤也很简单。2.创建一个项目文件。例如我在D盘创建可一个文件...

安装并使用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

作者:网络 来源:不详