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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值