webpack建立开发环境

webpack

webpack的强大在开发中能够得到更直白的体现，学习使用Webpack搭建开发环境，能够让开发更简单一些

使用source map

webpack能够打包我们的代码，虽然使用起来很方便，但在排除错误时，只会指向我们打包生成的bundle.js，很难定位到相应的准确位置。使用source map,能够跟踪错误的警告信息。
source map有许多配置信息，可以仔细查阅
webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(['dist'])
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-cheap-module-source-map'
}

Read More
webpack 开发环境

初识webpack@4.0

webpack

webpack

webpack 是一个现代 JavaScript应用程序的静态模块打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack的四个核心概念

入口(entry)

入口起点标明了webpack应该使用哪个模块，从哪个文件作为构建依赖包的开始
可以在webpack.config.js中的entry配置简单入口

1
2
3
module.exports = {
  entry: './path/to/my/entry/file.js'
};

Read More
webpack 前端工具