github地址传货，覺得好的話給個(gè)star吧！
根據(jù)官方文檔進(jìn)行配置(webpack3)
具有自動(dòng)編譯宏娄、打包问裕、熱更新、代碼檢查孵坚、服務(wù)器環(huán)境預(yù)覽僻澎、自動(dòng)部署等功能
下面來簡單的介紹一下搭建此項(xiàng)目的步驟和思路
項(xiàng)目結(jié)構(gòu)
此項(xiàng)目的使用方法：
#以下命令均可在package.json和deploy.sh中進(jìn)行配置
#開發(fā)環(huán)境下運(yùn)行
npm run dev
#使用Eslint進(jìn)行代碼檢測(cè)
npm run lint
#打包構(gòu)建
npm run build
#服務(wù)器環(huán)境下預(yù)覽
npm run serve
#以下命令不需要運(yùn)行 npm run build十饥，此腳本會(huì)自動(dòng)幫你運(yùn)行
#自動(dòng)打包部署到測(cè)試環(huán)境
sudo sh ./deploy.sh build dev
#自動(dòng)打包部署到生產(chǎn)環(huán)境
sudo sh ./deploy.sh build prod
#如果服務(wù)器中沒有對(duì)應(yīng)的目錄，你可以運(yùn)行下面的代碼在部署時(shí)自動(dòng)在服務(wù)器上生成一個(gè)目錄
sudo sh ./deploy.sh build prod(or dev) newDir
首先你需要使用npm來下載一些依賴祖乳，這對(duì)于經(jīng)常使用npm的同學(xué)來說并不陌生逗堵，具體的一些依賴在package.json文件里：
{
"name": "webpack-template",
"version": "1.0.0",
"description": "webpack template",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --colors",
"build": "cross-env NODE_ENV=prod webpack -p",
"lint": "cross-env NODE_ENV=lint webpack-dev-server --open",
"serve": "http-server ./dist -p 8888 -o"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.4",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"eslint": "^4.14.0",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-loader": "^0.5.4",
"html-webpack-plugin": "^2.30.1",
"http-server": "^0.10.0",
"postcss-loader": "^2.0.10",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.1"
}
}
在使用時(shí)，你只需要npm install就可以了眷昆。
項(xiàng)目中蜒秤，webpack.config.js為webpack的配置文件，當(dāng)你在命令行中輸入具體的命令時(shí)亚斋，由它來進(jìn)行一些任務(wù)分配作媚，具體的代碼為:
// 獲取環(huán)境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace(/(\s*$)|(^\s*)/ig,"");
// 根據(jù)環(huán)境變量引用相關(guān)的配置文件
module.exports = require(`./config/webpack.config.${env}.js`)
在config/config.js中,用來保存一些全局的變量帅刊，比如要進(jìn)行打包的html模板纸泡，一些路徑等信息，在這里我只配置了html模板：
/**
* 全局配置文件
*/
module.exports = {
// 項(xiàng)目中的html文件赖瞒，不需要后綴
HTMLDirs:[
"a", //a.html
"b" //b.html
]
}
config/webpack.config.base.js是webpack的基本配置女揭，包括打包編譯時(shí)的模板配置，loaders栏饮、打包輸出路徑等信息:
/**
* webpack 基礎(chǔ)配置
*/
const webpack = require('webpack');
const path = require("path");
// 引入模板插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 環(huán)境變量
const env = process.env.NODE_ENV
// 提取js中的css
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 引入config.js
const config = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}
// 生成多頁面的集合
config.HTMLDirs.forEach((page) => {
const htmlPlugin = new HTMLWebpackPlugin({
filename: `${page}.html`,
template: path.resolve(__dirname, `../src/page/${page}.html`),
chunks: [page, 'commons'],
minify: {
"removeAttributeQuotes": true,
"removeComments": true,
"removeEmptyAttributes": true,
}
});
HTMLPlugins.push(htmlPlugin);
Entries[page] = path.resolve(__dirname, `../src/javascript/${page}.js`);
})
module.exports = {
// 入口文件
entry: Entries,
// 啟用 sourceMap
devtool: "cheap-module-source-map",
// 輸出文件
output: {
filename: "javascript/[name].bundle.[hash].js",
path: path.resolve(__dirname, "../dist"),
publicPath: '/'
},
resolve: {
extensions: ['.js'] // 配置簡寫吧兔，配置過后，書寫該文件路徑的時(shí)候可以省略文件后綴
},
// 加載器
module: {
rules: [{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
attrs: ['img:src', 'link:href'],
interpolate: true
}
}]
},
{
// 對(duì) css 后綴名進(jìn)行處理
test: /\.css$/,
// 不處理 node_modules 文件中的 css 文件
exclude: /node_modules/,
/* 內(nèi)嵌style形式 */
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader',
// options: {
// // 開啟 css 壓縮
// minimize: true,
// }
// }]
/* link形式 (按照官方配置css內(nèi)圖片不能加載袍嬉，待解決) https://doc.webpack-china.org/loaders/style-loader*/
// use: [
// { loader: "style-loader/url" ,options: { convertToAbsoluteUrls: true }},
// { loader: "file-loader", options: { outputPath: 'css/'}},
// ]
/* link打包之后引入對(duì)應(yīng)的css形式(dev模式下為內(nèi)嵌style形式) */
use: env === 'prod'
? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['env']
}
}],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
// 打包生成圖片的名字
name: "image/[name].[hash].[ext]",
}
}],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["url-loader"]
}
],
},
// 插件
plugins: [
// new webpack.BannerPlugin('Created by YourName.')
// 自動(dòng)生成 HTML 插件
...HTMLPlugins
],
}
config/webpack.config.base.js和config/webpack.config.dev.js分別為生產(chǎn)環(huán)境和測(cè)試環(huán)境下的配置境蔼，config/webpack.config.lint.js是使用ESlint對(duì)代碼進(jìn)行檢查的配置，具體可在github中查看,使用方法和教程都在上面伺通，歡迎大家提issue箍土！
·
