Webpack-v3.5.4的使用(一)
一、构建项目目录
(1)、运行node -v
(2)、建立新文件夹: mkdir webpack-demo
(3)、在新建文件夹中初始化npm: npm init
(4)、安装webpack: npm install webpack --save-dev (若想安装固定版本则npm install [email protected] --save-dev )
(5)、新建目录放置代码源文件: mkdir src
(6)、新建目录放置打包以后的静态资源:mkdir dist
(7)、给项目跟路径下新建一个初始化的页面
1、<script type="text/javascript" src="bundle.js"></script>
假设引入的script文件是叫做bundle.js
2、src文件夹下新建两个问价script文件夹和style文件夹
(8)、给该项目建立一个webpack的配置文件,新建webpack.config.js
(9)、命令行中运行webpack,dist目录下生成js文件并出现bundle.js
注意:若webpack.config.js的名称改变,比如说教webpack.dev.config.js
那么再次运行webpack就不好使了
应在命令行输入webpack --config webpack.dev.config.js则会生效
(10)、在package.json中设置传递参数、查看打包的过程,原因等等
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
运行时npm run webpack
截至到以上信息所实现的是一个基本的js文件的打包
目前html文件中只是引用一个script文件,且是固定的文件名,打包以后的文件名不确定,怎样避免手动设置路径?下回继续。。。