webpack打包php资源,webpack打包初识

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

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

3.使用命令初始化目录cnpm init

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

5.使用命令安装webpackcnpm install webpack --save-dev

6.查看生成的目录结构dir

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

mkdir src

静态资源目录

mkdir dist

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

mkdir script

样式目录

mkdir style

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

mkdir js

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

cd src

cd script

echo ... > main.js

main.js内容如下:

function helloWorld(){

}

11.在根目录创建项目初始化页面echo ... > index.html

文件名:index.html

内容如下:

html>

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

webpack.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文件已经生效cd dist/js

dir

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

dir

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

17.在命令行输入webpack --config webpack.dev.config.js后回车webpack --config webpack.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: no test specified\" && exit 1",

"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

},

"author": "",

"license": "ISC",

"devDependencies": {

"webpack": "^2.2.1"

}

}

20.运行webpackcnpm run webpack