webpack

前端工具

1. 编译类
   babel：ES6->ES5
   grunt/gulp
2. 打包
   browserify：一堆文件 -> 单个文件
3. 开发辅助
   browser-sync：多端同步
4. 测试类
   单元测试：模块、函数
   集成测试：
   压力测试：性能、负载能力、隐藏bug
5. webpack+插件
   打包、编译、测试、调试

webpack打包

安装webpack（全局）

cnpm i -g webpack

配置文件

/*file: webpack.config.js*/
const pathlib = require('path');

module.exports = {
	entry: 	'./src/1.js'		// 待编译的文件——路径前加 ./
	output:	{
		path:		pathlib.resolve('dest/'),	// 目标目录
		filename:	'bundle.js'					// 输出文件名
	}
}

运行webpack

默认: webpack
文件名改了: webpack --config xxx

dev-server开发服务器

安装

cnpm webpack webpack-cli webpack-dev-server -D

配置文件

const pathlib=require('path');
const Webpack=require('webpack');

module.exports={
  mode:  'development',		// 开发环境 / 生产环境
  entry: './src/index',		// 目标资源文件
  output: {
    path:     pathlib.resolve('dest'),
    filename: 'bundle.js'
  },
  plugins: [				// 热更新
    new Webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase:          pathlib.resolve('static'),	// 静态文件地址
    port:                 8090,							// 端口
    hot:                  true,							// 热更新
    historyApiFallback:   true							// 所有访问定向到index.html
  }
};

运行

webpack-dev-server --watch --inline --config 文件名

babel-loader

ES6 ->ES4

babel-loader

1. babel-loader 给webpack用的
2. babel-core babel核心库
3. babel-preset-env 环境预设

安装

cnpm i babel-loader babel-core babel-present-env -D

配置文件

const pathlib=require('path');

module.exports={
  mode: 'development',
  entry: './src/es6',
  output: {
    path: pathlib.resolve('dest'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {presets: ['env']}
      }
    }]
  }
};

运行

webpack --config xxx

css-loader

安装

cnpm i css-loader -D

配置文件

const pathlib=require('path');

module.exports={
  mode: 'development',
  entry: './src/2',
  output: {
    path: pathlib.resolve('dest'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'}
    ]
  }
};

运行

webpack --config xxx