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 [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文件,且是固定的文件名,打包以后的文件名不确定,怎样避免手动设置路径?下回继续。。。


猜你喜欢

转载自blog.csdn.net/liuxin_1991/article/details/78834999