环境配置
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝镜像
cnpm -v #查看版本
Webpack安装
#//全局安装
cnpm install -g webpack
#//安装到你的项目目录
cnpm install --save-dev webpack
项目配置
项目初始化
#自动创建这个package.json
cnpm init
#安装Webpack
cnpm install --save-dev webpack
Demo配置
{
"name": "jswebpack",
"version": "1.0.0",
"description": "a demo about webpack",
"main": "index.js",
"scripts": {
"watch": "webpack --progress --colors --config webpack.dev.config.js --watch",
"build": "webpack --display-error-details --config webpack.dev.config.js",
"deploy": "webpack --display-error-details --config webpack.pro.config.js"
},
"author": "Tan",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^4.0.0",
"jquery-validation": "^1.17.0",
"lodash": "^4.17.4",
"style-loader": "^0.20.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0"
}
}
开发环境
webpack.dev.config.js
const webpack = require('webpack'); //访问内置的插件
const path = require('path'); //node path
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* 开发环境
* @since 2018-02-01 17:29:38
* @author Tan<tandamailzone@gmail.com>
*/
const config = {
//入口文件
entry: {
index: __dirname + '/script/index.js',
detail: __dirname + '/script/detail.js',
//部分通用的第三方库
vendor: [
__dirname + '/script/module/rem.js',
__dirname + '/script/vendor/jquery.cookie.js',
]
},
//输入文件
output: {
filename: 'script/[name].js', //打包后输出文件的文件名
path: path.resolve(__dirname, 'assets/src/') //打包后的文件存放的地方
},
//通过AMD方式载入全局配置
externals: {
jquery: 'window.$'
},
//开启sourceMap, 生成一个 DataUrl 形式的 SourceMap 文件.
devtool: 'inline-source-map',
//加载器
module: {
loaders: [
{
//CSS加载器(css-loader)
test: /.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true //css压缩
}
}
],
publicPath: '../'
})
},
{
//JS加载器(babel-loader)
test: /.js$/,
include: [
// 只去解析运行目录下的 src 和 demo 文件夹
path.join(process.cwd(), './js')
],
loader: 'babel-loader',
query: {
presets: ['es2015'],
}
},
{
//图片资源加载器(url-loader)
test: /.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=10240&name=image/[name].[ext]'
},
{
//字体资源加载器(url-loader)
test: /.(woff)|(svg)|(eot)|(ttf)$/,
loader: 'url-loader?limit=1024&name=font/[name].[ext]'
}
]
},
plugins: [
/* new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
}),*/
//合并压缩css
new ExtractTextPlugin({
filename: 'style/[name].css'
}),
// 构建优化插件-提取公共代码
new webpack.optimize.CommonsChunkPlugin({
//common指引入(import)的文件, vender指entry中的vender
names: ['common', 'vendor'],
//重复资源超过阀值及提出来到公共文件中去
minChunks: 2
}),
//在building之前删除以前build过的文件或目录
new CleanWebpackPlugin(['assets/src/script/*.js', 'assets/src/style/*.css'], {
root: __dirname, //当前根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
})
]
}
module.exports = config;
生产环境
webpack.pro.config.js
const webpack = require('webpack'); //访问内置的插件
const path = require('path'); //node path
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* 生产环境
* @since 2018-02-01 17:29:38
* @author Tan<tandamailzone@gmail.com>
*/
const config = {
//入口文件
entry: {
index: __dirname + '/script/index.js',
detail: __dirname + '/script/detail.js',
//部分通用的第三方库
vendor: [
__dirname + '/script/module/rem.js',
__dirname + '/script/vendor/jquery.cookie.js',
]
},
//输入文件
output: {
//打包后输出文件的文件名
filename: 'script/[name].js',
//打包后的文件存放的地方
path: path.resolve(__dirname, 'assets/src/')
},
//通过AMD方式载入全局配置
externals: {
jquery: 'window.$'
},
//开启sourceMap, 生成一个 DataUrl 形式的 SourceMap 文件.
devtool: 'inline-source-map',
//加载器
module: {
loaders: [
{
//CSS加载器(css-loader)
test: /.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true //css压缩
}
}
],
publicPath: '../'
})
},
{
//JS加载器(babel-loader)
test: /.js$/,
include: [
// 只去解析运行目录下的 src 和 demo 文件夹
path.join(process.cwd(), './js')
],
loader: 'babel-loader',
query: {
presets: ['es2015'],
}
},
{
//图片资源加载器(url-loader)
test: /.(png|jpg|gif|svg)$/,
loader: [
'url-loader?limit=10240&name=image/[name].[ext]',
'image-webpack-loader' //图片压缩
]
},
{
//字体资源加载器(url-loader)
test: /.(woff)|(svg)|(eot)|(ttf)$/,
loader: 'url-loader?limit=1024&name=font/[name].[ext]'
}
]
},
plugins: [
//压缩js
new webpack.optimize.UglifyJsPlugin(),
//合并压缩css
new ExtractTextPlugin({
filename: 'style/[name].css'
}),
// 构建优化插件-提取公共代码
new webpack.optimize.CommonsChunkPlugin({
//common指引入(import)的文件, vender指entry中的vender
names: ['common', 'vendor'],
//重复资源超过阀值及提出来到公共文件中去
minChunks: 2
}),
//在building之前删除以前build过的文件或目录
new CleanWebpackPlugin(['assets/src/script/*.js', 'assets/src/style/*.css'], {
root: __dirname, //当前根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
})
]
}
module.exports = config;
使用
#监听模式运行
cnpm run watch
#开发环境
cnpm run build
#生产环境
cnpm run deploy