開(kāi)始
首先生成一個(gè)項(xiàng)目 npm init
安裝webpack以及webpack-dev-server
npm install webpack webpack-dev-server --save-dev
(由于使用了之前的老靜態(tài)頁(yè)面做練習(xí),只是簡(jiǎn)單的打包了css,js以及一些靜態(tài)文件)
需要安裝的依賴有:css-loader、style-loader、extract-text-webpack-plugin(該插件可以使散落的css文件打包成一個(gè)css,在首頁(yè)使用link引入)绿聘、file-loader级解、url-loader、webpack-merge试伙、html-webpack-plugin(用于生成html模板)
然后在package.json文件的script中配置開(kāi)啟以及打包的內(nèi)容
"dev": "webpack-dev-server --open --config webpack.config.js"
"build": "webpack --progress --hide-modules --config build.js"
在這里需要?jiǎng)?chuàng)建兩個(gè)文件:一個(gè)是webpack.config.js以及build.js
在webpack.config.js文件中：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: {
main: './main'
},
output: {
path: path.join(__dirname, './distdoc'),
publicPath: '/distdoc/',
filename: 'main.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
publicPath: './',
use: 'css-loader?minimize',
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader:'url-loader?limit=1024&name=distdoc/[hash].[ext]'
}
]
},
plugins: [
new ExtractTextPlugin('main.css')
]
};
module.exports = config;
在這里需要在配置css中加上publicPath: './' 讓css中的資源地址為相對(duì)路徑嘁信，css-loader后面加上minimize使打包后的css代碼壓縮，入口文件為當(dāng)下的main.js疏叨，需要配置main.js潘靖，出口文件則配置為distdoc文件夾下面的main.js(自動(dòng)生成)
在main.js中 把我們需要打包編譯的文件加上
import './css/reset.css'
import './css/index.css'
import func from './js/func.js'
import JSONdate from './js/JSONdate.js'
func();
JSONdate();
后面的js文件 我們使用export default function ...()的方法將其導(dǎo)出
最后在需要打包的build.js文件中
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.config')
webpackBaseConfig.plugins = []
module.exports = merge(webpackBaseConfig, {
output: {
publicPath: '/distdoc/',
filename: '[name].js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
filename: '../index_pro.html',
template: './index.html',
inject: false
})
]
})
我們將其打包的文件為index_pro.html，模板為index.html蚤蔓，配置webpack.optimize.UglifyJsPlugin讓打包后的js代碼壓縮
