1.新建项目目录,目录名称webpack-test

2.进入新建的项目目录中(webpack-test)

cdwebpack-test

3.使用命令初始化目录

cnpminit

4.在3步骤基础上,会输出让你输入初始化目录的相关信息,你可以根据自己的实际情况进行输入,当然你也可以一路回车下去

5.使用命令安装webpack

cnpminstallwebpack--save-dev

6.查看生成的目录结构

dir

7.根据项目需求创建相应的目录

源文件目录mkdirsrc静态资源目录mkdirdist

8.进入src目录,在源文件目录中创建脚本目录和样式目录

脚本目录mkdirscript样式目录mkdirstyle

9.进入dist目录,在静态资源目录中创建js目录,用于存储打包生成的js文件

cddistmkdirjs

10.在script目录中创建main.js文件,用来编写我们的业务脚本

cd..cdsrccdscriptecho...>main.jsmain.js内容如下:functionhelloWorld(){}

11.在根目录创建项目初始化页面

echo...>index.html文件名:index.html内容如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title></title><linkrel="stylesheet"href=""></head><body><scriptsrc="bundle.js"></script></body></html>

12.创建webpack.config.js配置文件

echo...>webpack.config.jswebpack.config.js内容如下:module.exports={entry:'./src/script/main.js',output:{path:'./dist/js',filename:'bundle.js'}}

13.在命令行运行webpack命令

14.打开dist/js目录查看生成的bundle.js文件,如果bundle.js文件存在,则说明webpack.config.js文件已经生效

cddist/jsdir

15.假如修改webpack.config.js文件名,将其重命名为其他的名称,你想的都可以,我这里用webpack.dev.config.js

renwebpack.config.jswebpack.dev.config.jsdir

16.在命令行运行webpack命令,输出的内容将与12步骤不同,那么如何设置才能再输出12步骤的内容?

webpack

17.在命令行输入webpack --config webpack.dev.config.js后回车

webpack--configwebpack.dev.config.js

18.在自定义配置webpack.config.js文件之后,如何使用webpack的其他参数?19.修改package.json文件

{"name":"webpack-test","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1","webpack":"webpack--configwebpack.config.js--progress--display-modules--colors--display-reason"},"author":"","license":"ISC","devDependencies":{"webpack":"^2.2.1"}}20.运行webpack

cnpmrunwebpack