Webpack3的使用（一）

Webpack-v3.5.4的使用（一）

一、构建项目目录

(1)、运行node -v

(2)、建立新文件夹： mkdir webpack-demo

(3)、在新建文件夹中初始化npm：   npm init

(4)、安装webpack： npm install webpack --save-dev (若想安装固定版本则npm install webpack@1.13.2 --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文件，且是固定的文件名，打包以后的文件名不确定，怎样避免手动设置路径？下回继续。。。