上星期寫(xiě)了篇vue-cli下生成的webpack簡(jiǎn)單項(xiàng)目，關(guān)于模塊和組件的代碼分割式的項(xiàng)目開(kāi)發(fā)坡脐，今天就總結(jié)下慕課網(wǎng)推出的純webpack打包的一些細(xì)節(jié)，包括webpack1和2的一些不同和webpack配置文件的手動(dòng)編寫(xiě)以及所有打包的東西如何濃縮成一個(gè)js文件
項(xiàng)目文件夾：
根目錄：
1.png
src下的目錄：
2.png
3.png
4.png
dist下打包后生成的目錄：
5.png
下面是詳細(xì)的流程步驟：
1、建立項(xiàng)目名
mkdir 項(xiàng)目名
2置侍、定位項(xiàng)目名里面
cd 項(xiàng)目名
3马篮、生成package.json文件
npm init --yes
4沾乘、安裝webpack( 不加版本號(hào)默認(rèn)為2.0以上 )
cnpm install webpack --save-dev
5、生成依賴包浑测，即node_modules目錄 ( 生成一小部分翅阵，后面需安裝各種包，不像vue-cli本身就集成很多 )
cnpm install
6迁央、建立src和dist文件夾掷匠，src目錄下建styles和scripts( 可省略此步，手動(dòng)新建 )
mkdir src mkdir dist ……
7岖圈、根目錄下建立index.html讹语，并暫時(shí)引入出口文件bundle.js( 前期預(yù)覽效果，后面會(huì)自動(dòng)引入 )
8蜂科、根目錄建立webpack.config.js顽决，先定義進(jìn)出口文件對(duì)應(yīng)的目錄及隨便寫(xiě)entry文件的內(nèi)容
module.exports = {
entry: {
main: './src/scripts/main.js',
aaa: './src/scripts/aaa.js',
bbb: './src/scripts/bbb.js',
ccc: './src/scripts/ccc.js'
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: 'js/[name]-bundle.js'
}
9、初次執(zhí)行打包命令导匣，可看到dist下生成打包后的js文件
直接在命令行輸入 'webpack' ( 后面每一步操作都要webpack一下才可看到效果 )
'webpack --display-error-details' ： 出錯(cuò)時(shí)錯(cuò)誤的詳情
'webpack -w' ： 提供watch方法才菠，實(shí)時(shí)進(jìn)行打包更新( 推薦加上-w )
'webpack -p' ： 對(duì)打包后的文件進(jìn)行壓縮
'webpack -d' ： 提供SourceMaps，方便調(diào)試
10贡定、生成頁(yè)面中的html赋访，安裝html-webpack-plugin插件并配置好
cnpm install html-webpack-plugin --save-dev
module.exports = {
plugins: [
//根目錄的index.html生成dist下的html，多new幾個(gè)就可多個(gè)頁(yè)面生成
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body', //script標(biāo)簽的放置
title: 'index title test',
minify: { //html壓縮
removeComments: true, //移除注釋
collapseWhitespace: true //移除空格
}
//chunks: ['main','aaa'], //生成html頁(yè)面后的script文件的引入
//排除沒(méi)有用到的script文件，其他的都引進(jìn)來(lái)进每，比chunks更好匹配
excludeChunks: ['bbb','ccc'] //引入了main.js和aaa.js
})
}
11汹粤、接下來(lái)安裝各種loader及配置：
js的loader安裝：
cnpm install babel-preset-latest --save-dev
cnpm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
css的loader安裝：
cnpm install style-loader css-loader --save-dev
//css3前綴補(bǔ)全:
cnpm install postcss-loader --save-dev
cnpm install autoprefixer --save-dev
sass的loader安裝：
cnpm install sass-loader node-sass webpack --save-dev
模板中的loader安裝:
cnpm install html-loader --save-dev ( html )
cnpm install ejs-loader --save-dev ( ejs )
圖片:
cnpm install file-loader --save-dev
url：
cnpm install url-loader --save-dev
圖片壓縮：
cnpm install image-webpack-loader --save-dev
大體配置格式：
module.exports = {
module: {
rules: [
//處理js中的loader
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname,'/src'),
exclude: path.resolve(__dirname,'/node_modules')
},
//處理css中的loader
{
test: /\.css$/,
loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
},
//處理sass中的loader
{
test: /\.scss$/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader'
},
//處理html模板中的loader
{
test: /\.html$/,
loader: 'html-loader'
},
//處理ejs模板中的loader,以.tpl后綴結(jié)尾的
{
test: /\.tpl$/,
loader: 'ejs-loader'
},
//處理圖片中的loader( 通常url/file/image-webpack等loader配合 )
{
test: /\.(png|jpg|gif|svg)$/i,
loader: 'file-loader'
}
]
}
}
css3前綴要放在插件里，與webpack1的用法不同
module.exports = {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require("autoprefixer")({
browsers: ["last 5 versions"]
})
]
}
})
]
}
最終的webpack.config.js配置如下：
var webpack = require("webpack");
var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/app.js', /*{
main: './src/scripts/main.js',
aaa: './src/scripts/aaa.js',
bbb: './src/scripts/bbb.js',
ccc: './src/scripts/ccc.js'
}*/
output: {
path: path.resolve(__dirname,'./dist'),
filename: 'js/[name]-bundle.js',
publicPath: 'http://cdn.com/' //上線的絕對(duì)路徑
},
//插件
plugins: [
new htmlWebpackPlugin({ //根目錄的index.html生成dist下的html田晚，可以多個(gè)生成
filename: 'index.html',
template: 'index.html',
inject: 'body', //script標(biāo)簽的放置
//title: 'index title test',
minify: { //html壓縮
removeComments: true, //移除注釋
collapseWhitespace: true //移除空格
}
//chunks: ['main','aaa'], //生成html頁(yè)面后的script文件的引入
//excludeChunks: ['bbb','ccc'] //排除沒(méi)有用到的script文件嘱兼，其他的都引進(jìn)來(lái)，比chunks更好匹配
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [ //瀏覽器自動(dòng)補(bǔ)全前綴
require("autoprefixer")({
browsers: ["last 5 versions"]
})
]
}
})
/*,
new htmlWebpackPlugin({
filename: 'b.html',
template: 'index.html',
inject: 'body',
title: "this is b.html",
//chunks: ['bbb'],
//excludeChunks: ['aaa','ccc']
}),
new htmlWebpackPlugin({
filename: 'c.html',
template: 'index.html',
inject: 'body',
title: "this is c.html",
//chunks: ['ccc'],
//excludeChunks: ['aaa','bbb']
})*/
],
module:{
rules: [ //1.0的是loaders
//處理js中的loader
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname,'/src'), //指定打包的文件
exclude: path.resolve(__dirname,'/node_modules') //排除打包的文件贤徒，加速打包時(shí)間
},
//處理css中的loader
{
test: /\.css$/,
loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' //@import進(jìn)來(lái)的樣式在問(wèn)號(hào)后加
},
//處理sass中的loader
{
test: /\.scss$/,
loader: 'style-loader!css-loader!postcss-loader!sass-loader'
},
//處理html模板中的loader
{
test: /\.html$/,
loader: 'html-loader'
},
//處理ejs模板中的loader,以.tpl后綴結(jié)尾的
{
test: /\.tpl$/,
loader: 'ejs-loader'
},
//處理圖片中的loader,file-loader,url-loader,image-webpack-loader相互配合(圖片格式轉(zhuǎn)換base64 圖片壓縮)
{
test: /\.(png|jpg|gif|svg)$/i, //模板中的圖片放相對(duì)路徑: src="${require('../imgs/aaa.jpg')}"
loader: 'url-loader'
}
]
}
}
配置后的東西可以在這里看到package.json( 也可在這里設(shè)置其他 )：
{
"name": "webpack-demo",
"version": "2.0.0",
"description": "wabpack demo",
"main": "index.js",
"babel": {
"presets": [
"latest"
]
},
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081",
"build": "cross-env NODE_ENV=production webpack --progress --colors --display modules --display reason --hide-modules"
},
"keywords": [
"wabpcck"
],
"author": "wu",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel": "^6.23.0",
"babel-core": "^6.24.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-latest": "^6.24.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.0",
"ejs-loader": "^0.3.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.3.0",
"imagemin-pngquant": "^5.0.0",
"install": "^0.8.8",
"loader": "^2.1.1",
"node-sass": "^4.5.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.3.3"
}
}
