自动化构建工具WebPack
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(),
]
网站题目:自动化构建工具WebPack
网址分享:http://myzitong.com/article/ijpgpe.html