webpack入门使用

时间  2019-11-10
标签 webpack 入门 使用 繁體版
原文   原文链接

1.废话

做为前端菜鸟，刚开始接触webpack时，是由于vue，经过vue-cli拉下来的代码，里面webpack基本已经配置好了，须要咱们本身配置的很少，一直想弄明白webpack是怎么用的，简单记录一下，模拟vue的目录结构，使用的webpack和webpack-dev-server版本也和vue中的同样，因此这两个安装时指定了版本。通常vue的目录结构是css

clipboard.png

2.webpack的使用

1）安装webpack

mkdir webpack-practice && cd webpack-practice // 建立并打开项目
npm init // 这时会生成一个package.json文件
npm install --save-dev webpack@3.6.0 // --save-dev 开发依赖，这时会生成package-lock.js

2）建立页面及入口文件main.js

新建dist文件夹，并建立index.html文件，并在index.html中引入将要被webpack打包过来的bundle.js文件；新建src文件夹，并建立js入口文件main.js。如今的目录结构是html

clipboard.png

<!-- dis/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

给页面加点背景试试前端

// src/main.js
document.body.style.background = 'pink';

如今index.html和main.js仍是不相关的，用webpack将main.js打包到dist目录下vue

$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
Hash: 9f53edbc27a012ab9184
Version: webpack 3.6.0
Time: 59ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.52 kB       0  [emitted]  main
   [0] ./src/main.js 50 bytes {0} [built]

这时src中就生成了一个bundle.js文件node

clipboard.png

用浏览器直接打开看看webpack

clipboard.png

发现页面已经变了，说明webpack成功将main.js打包到bundle.js中去了。nginx

webpack配置文件web

在根目录新建webpack.config.js，采用官方的配置vue-cli

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

配置好了执行npm

$ ./node_modules/.bin/webpack
$ ./node_modules/.bin/webpack
Hash: 08e137312cf5d4feb095
Version: webpack 3.6.0
Time: 55ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

执行这条命令会自动去寻找当前目录下的webpack.config.js文件。经过配置文件，比以前操做起来方便多了，咱们能够有更快捷的操做。

npm操做方式

咱们可使用npm start命令来代替上述繁琐的操做，设置package.json文件中的scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 08e1373a2cf5d4feb095
Version: webpack 3.6.0
Time: 53ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

执行这个命令会在node_modules/.bin中寻找webpack，不管是全局仍是局部安装的webpack，你都不须要写前面那指明详细的路径了。

3）打包css文件

首先咱们让页面的内容更丰富些，在src中新建page.js，并写些内容

// src/page.js
module.exports = function () {
  let content = document.createElement('div');
  content.textContent = 'In the begining God created the heavens and the earth';
  return content;
}

入口文件是main.js，因此要将page.js引入到main.js中

// src/main.js
import Page from './page';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

运行一下试试

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: b4bcab267ae059f4e8b5
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.21 kB       0  [emitted]  main
   [0] ./src/main.js 135 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]

而后看看页面

clipboard.png

接下来咱们给文字加点样式，在src新建page.css文件，加些样式

/* src/page.css */
#app div{
  color: #333;
  font-size: 30px;
  font-family: fantasy;
}

一样在main.js中引入，同时咱们将背景颜色改一下

// src/main.js
import Page from './page';
import './page.css';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

运行一下试试

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 5d67b4883c9d13aec1e1
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.77 kB       0  [emitted]  main
   [0] ./src/main.js 155 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 273 bytes {0} [built] [failed] [1 error]

ERROR in ./src/page.css
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.css Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| /* src/page.css */
| #app div{
|   color: '#fff';
|   font-size: 30px;
 @ ./src/main.js 3:0-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/liuzhiqin/.npm/_logs/2018-10-19T06_24_25_011Z-debug.log

咦，怎么到page.css那里报错了，报错信息写的很清楚，须要合适的loader去处理这种文件类型。loader是webpack中用来处理不一样文件的，如样式、图片、JS等资源，最后打包输出。webpack处理css文件须要style-loader和css-loader。

安装style-loader和css-loader

$ npm install --save-dev style-loader css-loader
npm WARN css-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-practice@1.0.0 No repository field.

+ style-loader@0.23.1
+ css-loader@1.0.0
added 42 packages from 54 contributors in 5.966s

并在webpack.config.js中配置

...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      },
    ]
  }

运行一下

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 0c5a8f5abb63caaabad1
Version: webpack 3.6.0
Time: 393ms
    Asset     Size  Chunks             Chunk Names
bundle.js  20.6 kB       0  [emitted]  main
   [0] ./src/main.js 158 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
    + 3 hidden modules

看看页面效果

clipboard.png

4）打包scss文件

webpack处理scss文件和css相似。首先也是在src目录下新建page.scss文件，并在main.js中引入

// src/page.scss
#app{
  div{
    text-align: center;
    border: 1px solid red;
  }
}

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

运行一下确定会报错

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: e6d2ef92a954bef9d9f4
Version: webpack 3.6.0
Time: 412ms
    Asset     Size  Chunks             Chunk Names
bundle.js  21.2 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 263 bytes {0} [built] [failed] [1 error]
    + 3 hidden modules

ERROR in ./src/page.scss
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.scss Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| // src/page.scss
| #app{
|   div{
|     text-align: center;
 @ ./src/main.js 4:0-21
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/liuzhiqin/.npm/_logs/2018-10-19T07_17_11_531Z-debug.log

处理scss文件须要安装sass-loader和node-sass

$ npm install --save-dev sass-loader node-sass

安装的那些开发依赖均可以在package.json中找到

"devDependencies": {
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0"
  }

修改webpack.config.js配置

...
  module: {
    rules: [
      ...
      {//处理scss
        test: /\.scss$/,
        use: ["style-loader","css-loader","sass-loader"]//简化写法
      }
    ]
  }
}

再次运行一下

$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 96acf3f989cacc7756fa
Version: webpack 3.6.0
Time: 500ms
    Asset     Size  Chunks             Chunk Names
bundle.js  22.3 kB       0  [emitted]  main
   [2] ./src/main.js 181 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
    + 3 hidden modules

页面已经发生了变化

clipboard.png

5）打包图片资源

首先在src中新件夹image,用于存放原始图片，而后随便找张图片放进去。webpack处理图片须要安装url-loader和file-loader

npm isntall --save-dev url-loader file-loader

配置webpack.config.js,在module中加上处理图片的规则

// webpack.config.js
const path = require('path');
module.exports = {
 ...
  module: {
    rules: [
      ...
      {//处理图片
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: ['url-loader?limit=8192&name=images/[name]-[hash:5].[ext]']//打包后放在images文件下，并加上哈希值命名
      }
    ]
  }
}

同时，在main.js中加引入图片

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);
$ npm start

> webpack-practice@1.0.0 start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: a286e8bbed5798e46b43
Version: webpack 3.6.0
Time: 383ms
                Asset     Size  Chunks             Chunk Names
images/hand-a729a.jpg   106 kB          [emitted]
            bundle.js  22.6 kB       0  [emitted]  main
   [2] ./src/main.js 299 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules

clipboard.png

咱们看到在dist中生成了一个新的文件夹images，打包后的图片也在里面，咱们看看页面效果

clipboard.png

6）webpack-dev-server的使用

通常咱们都是项目放到服务器上的，这样咱们就能够实现自动刷新页面，webpack也能够起服务的，这时须要安装webpack-dev-server。

$ npm install --save-dev webpack-dev-server@2.9.1

安装成功后，咱们须要对webpack进行配置，这时就能够放到服务器上运行了

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包后输出的文件名
    path: path.resolve(__dirname, 'dist') //打包后文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist'//服务指向的根目录
  }
}

执行代码

$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 976ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.

在浏览器输入localhost:8080，中看看效果

clipboard.png

这时咱们将背景改变一下，让它变回粉色试试

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);

webpack会自动打包，而且页面自动刷新，不再用手动刷新了。

clipboard.png

在开发阶段，通常都是在本地起个服务，执行npm run dev就能运行。为了效法vue项目的目录结构，在根目录新建文件夹build，并将webpack.config.js移到其中，并将其重命名为webpack.dev.conf.js。在package.json中加上

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },

执行npm run dev试试

$ npm run dev

> webpack-practice@1.0.0 dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 53ee487180346d1f2264
Version: webpack 3.6.0
Time: 1244ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 298 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 108ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  348 kB       0  [emitted]  [big]  main
 + 1 hidden asset
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
    + 95 hidden modules
webpack: Compiled successfully.

7）webpack插件

vue-cli拉下来的vue项目中，根目录有个index.html文件，这是个模板文件，用于生成dist文件下面的index.html文件，这就须要引入HtmlWebpackPlugin插件

安装HtmlWebpackPlugin

$ npm install --save-dev html-webpack-plugin
npm WARN css-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-practice@1.0.0 No repository field.

+ html-webpack-plugin@3.2.0
added 38 packages from 57 contributors in 8.443s

在根目录新建一个index.html文件，里面的代码以下

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

再次执行npm run dev，页面一样了成功显示

$ npm run dev

> webpack-practice@1.0.0 dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: d6c1b4bbf4e88618a995
Version: webpack 3.6.0
Time: 1696ms
                Asset       Size  Chunks                    Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js     348 kB       0  [emitted]  [big]  main
           index.html  389 bytes          [emitted]
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 539 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 7fd780016bdbd41a7a19
Version: webpack 3.6.0
Time: 87ms
     Asset       Size  Chunks             Chunk Names
index.html  353 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 502 bytes {1} [built]
        + 3 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: c3c1881cc01ac3fc0696
Version: webpack 3.6.0
Time: 84ms
     Asset       Size  Chunks             Chunk Names
index.html  349 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
        + 3 hidden modules
webpack: Compiled successfully.

在模板文件中，没有引入bundle.js文件，HtmlWebpackPlugin会自动添加。

clipboard.png

其实，能够彻底将dist文件夹删掉，服务依然能正常运行，这是由于webpack-dev-server会把打包好的数据存在内存中。如今目录结构是

clipboard.png

这就是为何在开发阶段时，只执行npm run dev来启动webpack-dev-server，那时并无生成dist文件夹，能够正常开发，从内存中直接加载数据。部署时，在经过命令打包（通常是npm run build)生成dist，而后再讲将打包好的dist放到服务器上，再经过nginx等web服务启动。

部署打包

在build文件下，新建webpack.prod.conf.js，里面的配置和webpack.dev.conf.js很像，以下

// build/webpack.prod.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包后输出的文件名
    path: path.resolve(__dirname, '../dist'),//打包后文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist',//服务指向的根目录
  },
  //webpack插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ]
}

并更新package.json，加上build命令，并将start设置为启动dev

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js"
  },
...
}

执行打包命令

$ npm run build

> webpack-practice@1.0.0 build /Users/liuzhiqin/Documents/study/webpack-practice
> NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js

Hash: 4dde899e11c579299335
Version: webpack 3.6.0
Time: 971ms
                Asset       Size  Chunks             Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js    22.6 kB       0  [emitted]  main
           index.html  349 bytes          [emitted]
   [2] ./src/main.js 301 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 254 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module

这时咱们的根目录就会生成一个dist文件

clipboard.png

未完待续，菜鸟总结，但愿能帮到其余新手，大神请忽略，勿喷~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程