1、创建webpack2_test文件夹，创建package.json文件
npm init 初始化项目
2、安装webpack包
1.全局安装 cnpm install webpack -g (目前版本是3.8.1)
2.项目安装 cnpm install webpack --save
文件目录
// index.less文件
body{
background:pink;
h1{
color:yellowgreen;
}
}
// index.es 文件
require('../styles/index.less');
import {data} from './data.es'
import('./async.es').then(function(res){
res.default();
})
//const data=123;
console.log(data);
console.log(1);
// data.es文件
const m=new Map();
m.set('data','index init')
export const test=function(){
console.log('test shaking')
}
export const data = m.get('data');
if(false==false){
console.log('产生')
}
//index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>webpack</h1>
</body>
</html>
3、创建webpack.config.js文件
写出导入导出文件，执行webpack命令
const webpack=require('webpack');
const path = require('path');
module.exports={
entry:{
'index':'./assets/scripts/index.es'
},
output:{
path:path.join(__dirname,'./assets/'),
publicPath:'./',//注入到index.html文件后，引入文件会默认加上./目录
filename:'scripts/[name].bundle.js'
}
}
4、配置css+es6语法的loader
1、安装css的依赖
cnpm isntall css-loader less less-loader style-loader extract-text-webpack-plugin --save-dev
2、安装es6依赖
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 --save-dev
module:{
rules:[{
test:/\.es$/,
use:[{
loader:"babel-loader",
options:{
"presets":[["es2015",{modules:false}],"stage-0"]
}
}]
},{
test:/\.less$/i,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:'css-loader'
},{
loader:'less-loader'
}]
})
}]
},
plugins:[
new ExtractTextPlugin('styles/[name].css')
]
1.提取css插件：extract-text-webpack-plugin，提取出css后最终生成的css，并放在指定目录下
2.plugins下全部配置插件
5、使用inde.html文件作为模板，并注入css、js，把index.html生成到指定目录下
const HtmlWebpackPlugin=require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./index.html',
inject:true
})
]
6、提取公共代码
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'scripts/[name].js',
minChunks:2 //被引用2次以上,提取到common.js文件中
})
]
7、代码压缩
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:true
},
output:{
comments:false
},
sourceMap:false
})
]
8、webpack3自带有优良特性（代码编译速度更快）
//以下为使用的webpack自带的功能，在plugins内使用
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'scripts/[name].js',
minChunks:2 //被引用2次以上,提取到common.js文件中
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:true
},
output:{
comments:false
},
sourceMap:false
}),
new webpack.optimize.ModuleConcatenationPlugin(),
]
8.1、去掉多余代码 （下面8.11和8.21条结合才行）
8.11scripts->data.es 文件中有test方法是多余代码，打包时可去掉
解决：代码要压缩，不压缩还是不能去掉多余代码
压缩：压缩是webpack自带的
8.12、babel模块化多余的代码可干掉
loader:"babel-loader",
options:{
"presets":[["es2015",{modules:false}],"stage-0"]
}
8.13、scope hoisting webpack3新增的模块，作用域提升,精简代码
new webpack.optimize.ModuleConcatenationPlugin()
8.14、code splitting 代码分割，主要是异步加载js
import('./async.es').then(function(res){
res.default();
})
//会生成一个0.bundle.js文件的代码，然后通过异步的方式在inde.html文件中加载
9、webpack.config.js文件所有代码
const webpack=require('webpack');
const ExtractTextPlugin=require('extract-text-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const path = require('path');
module.exports={
entry:{
'index':'./assets/scripts/index.es'
},
output:{
path:path.join(__dirname,'./assets/'),
publicPath:'./',//注入到index.html文件后，引入文件会默认加上./目录
filename:'scripts/[name].bundle.js'
},
module:{
rules:[{
test:/\.es$/,
use:[{
loader:"babel-loader",
options:{
"presets":[["es2015",{modules:false}],"stage-0"]
}
}]
},{
test:/\.less$/i,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:'css-loader'
},{
loader:'less-loader'
}]
})
}]
},
plugins:[
new ExtractTextPlugin('styles/[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'scripts/[name].js',
minChunks:2 //被引用2次以上,提取到common.js文件中
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:true
},
output:{
comments:false
},
sourceMap:false
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new HtmlWebpackPlugin({
filename:'index.html',
template:'./index.html',
inject:true
})
]
}
10、package.json依赖包版本
{
"name": "webpack2_test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^3.8.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0"
}
}
网友评论