webpack 中文文档: https://www.webpackjs.com/
什么是 Webpack?
webpack 是一个模块打包器. webpack 的主要目标是将 JavaScript 文件打包在一起, 打包后的文件用于在浏览器中使用, 但它也能够胜任转换 (transform), 打包(bundle) 或包裹 (package) 任何资源(resource or asset).
安装 Webpack
- # 全局安装
- npm install webpack -g
- # 局部安装
- npm install webpack --save-dev
由于 webpack1.x 和 3.x 版本存在区别, 全局安装 webpack 以后, 再局部安装可以避免版本冲突或不合适的情况
Webpack 打包 js 文件
- # webpack 原始 js 文件路径 打包后存放 js 文件路径
- webpack src/js/entry.js dist/js/bundle.js
Webpack 的配置文件 webpack.config.js
- const path = require('path');
- module.exports = {
- // 入口文件
- entry: './src/index.js',
- // 打包后输出的配置块
- output: {
- // 文件名
- filename: 'bundle.js',
- // 调用 resolve()设置路径
- path: path.resolve(__dirname, 'dist')
- }
- };
配置完成以后, 只需要执行 webpack 即可开始打包.
Webpack 打包 CSS 文件
(1) 下载对应的 loader 加载器:
- npm install css-loader style-loader --save-dev
- npm install file-loader url-loader --save-dev
url-loader 是对 file-loader 高层封装, 需要配合 file-loader 使用.
(2) 配置使用:
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist')
- },
- // 添加模块配置
- module: {
- // 查找规则
- rules: [
- {
- test: /\.css$/,
- // 要加载使用 Loader
- use: [
- 'style-loader',
- 'css-loader'
- ]
- }
- ]
- }
- };
Webpack 打包图像文件
(1) 下载对应的 loader 加载器:
npm install --save-dev file-loader
(2) 配置使用:
- const path = require('path');
- module.exports = {
- entry: './src/index.js',
- output: {
- filename: 'bundle.js',
- path: path.resolve(__dirname, 'dist')
- },
- module: {
- rules: [
- {
- test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader'
- ]
- },
- // 添加模块配置项
- {
- test: /\.(png|svg|jpg|gif)$/,
- use: [
- 'file-loader'
- ]
- }
- ]
- }
- };
Webpack 热加载技术
(1) 下载对应的安装包:
npm install --save-dev webpack-dev-server
(2) 配置使用:
- 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',
- devServer: {
- // 服务器内容目录
- contentBase: './dist'
- },
- plugins: [
- new CleanWebpackPlugin(['dist']),
- new HtmlWebpackPlugin({
- title: 'Development'
- })
- ],
- output: {
- filename: '[name].bundle.js',
- path: path.resolve(__dirname, 'dist')
- }
- };
(3) 添加脚本命令:
- {
- "name": "development",
- "version": "1.0.0",
- "description": "",
- "main": "webpack.config.js",
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "watch": "webpack --watch",
- // 配置一个命令名称
- + "start": "webpack-dev-server --open",
- "build": "webpack"
- },
- "keywords": [],
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "clean-webpack-plugin": "^0.1.16",
- "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"
- }
- }
Webpack 插件的使用
- var webpack = require('webpack');
- // 导入非 webpack 自带默认插件
- var ExtractTextPlugin = require('extract-text-webpack-plugin');
- var DashboardPlugin = require('webpack-dashboard/plugin');
- // 在配置中添加插件
- plugins: [
- // 构建优化插件
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- filename: 'vendor-[hash].min.js',
- }),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false,
- drop_console: false,
- }
- }),
- new ExtractTextPlugin({
- filename: 'build.min.css',
- allChunks: true,
- }),
- new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
- // 编译时 (compile time) 插件
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"',
- }),
- // webpack-dev-server 强化插件
- new DashboardPlugin(),
- new webpack.HotModuleReplacementPlugin(),
- ]
来源: http://www.bubuko.com/infodetail-2713696.html