webpack输出

1. 资源路径下新建一个js文件. print.js,并写入js代码
2. 删除之前的bundle.js,引入print.bundle.js和app.bundle.js
3. webpack 做如下修改
使用 source maps
使用 webpack-dev-server

之前的案例中一个js资源文件是index.js,一个构建好的js是build.js 但是一个项目不会生产环境只有一个js,也不会开发环境只有一个js,下面解决这个问题.

1. 资源路径下新建一个js文件. print.js,并写入js代码

2. 删除之前的bundle.js,引入print.bundle.js和app.bundle.js

  <html>
    <head>
      <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>

3. webpack 做如下修改

  const path = require('path');
  module.exports = {
   //输入的部分不再是一个字符串,而是对象.属性名称,值为路径
    entry: {
     app: './src/index.js',
     print: './src/print.js'
    },
    output: {
     //输出的时候更具属性名称来构建. 会输出到app.bundle.js 和print.bundle.js
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

webpack 自动生成项目入口文件以及自动清理生产目录

设置HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

修改webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');//这里引入插件
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: '这是一个标题'//title可以自定义,默认入口文件是index.html,可以通过设置filename属性修改.可以指定一个子目录（例如：）assets/admin.html
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

再次run webpack 后,发现重新生成了index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>一个标题</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>

设置clean-webpack-plugin
设置的目的是为了清理dist生产目录.之前用过字体图标和很多图片,生成了许多文件.但是当删除这些调用字体图标和图片的代码的时候,dist目录中仍有旧的文件.时间久后会变得臃肿,可以使用第三方插件解决
安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

做webpack.config.js配置

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');//这里引入插件
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),//这里设置里要清理的目录
      new HtmlWebpackPlugin({
        title: '这是一个标题'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

run webpack 后 dist目录下无用的文件会被清理掉

使用 source maps

使用source map方便调试.一般情况,构建好的build.js 的报错信息不准确.如果是两个js文件构建一个build.js,如果出错,无法知道是哪个源文件,哪行在报错.这里就需要使用source maps
配置 webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
   devtool: 'inline-source-map',//配置 source maps
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

使用 webpack-dev-server

1. npm安装 webpack-dev-server

npm install --save-dev webpack-dev-server

2. 配置webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    //配置devServer,设置内容目录
    devServer: {
      contentBase: './dist'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

3. 配置package.js

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack-dev-server --open"//使用npm start 启动webpack-dev-server
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

注意:个别编辑器或IDE下不能实现自动编译.调试代码及其痛苦.下面是中招编辑器列表,需要做相应的配置.

disable this feature in some common editors, see the list below:

Sublime Text 3 - Add atomic_save: "false" to your user preferences.
IntelliJ - use search in the preferences to find "safe write" and disable it.
Vim - add :set backupcopy=yes to your settings.
WebStorm - uncheck Use "safe write" in Preferences > Appearance & Behavior > System Settings.

sublime很常用,如果是汉化的配置方式:首选项->设置-用户-> 添加 “atomic_save”: false