该配置文件可以解决以下棘手问题:
js
1、配置两个以上入口文件
2、提取常用公共模块为单独的js文件(vendor--webpack.optimize.CommonsChunkPlugin)
3、解决引用第三方文件的依赖问题(imports-loader/script-loader)
4、jQuery以及依赖jQuery的js文件引用出错问题(webpack.ProvidePlugin)
css
1、如何引入css
2、把css弄成单独文件提取出来--(ExtractTextPlugin)
3、给css自动加前缀:-webkit-等,已兼容更多浏览器(autoprefixer)
话不多说,看配置文件:此外改配置文件还加入的es6语法兼容,以及less文件编译处理
webpack.config.js
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var node_dir = __dirname + '/node_modules';
module.exports = {
devtool: 'inline-source-map',
entry: {
entry1: './static/js/app.js',
// entry2:'./static/js/app.js',
vendor: ["jquery", "swiper.jquery"]
},
output: {
path: path.resolve("./dist"),
filename: '[name]_bundle.js',
publicPath: '/'
},
postcss: [autoprefixer],
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}),
new webpack.DefinePlugin({
DEBUG: process.env.NODE_ENV !== 'production'
}),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'templates/pages/index.html')
})
],
resolve: {
alias: {
'swiper.jquery':node_dir+"/swiper/dist/js/swiper.jquery.min.js",
'swiper.animate': node_dir+'/swiper/dist/js/swiper.animate1.0.2.min.js'
}
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
"es2015",
]
}
}, {
test: /\.less$/,
loader: 'style!css!postcss!less'
}, {
test: /\.css/,
loader: ExtractTextPlugin.extract('style', 'css', 'postcss')
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=25000'
}
]
}
};
package.json
{
"name": "zizaihome-homepage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline --progress --colors --port 8080",
"build": "NODE_ENV=production webpack --watch"
},
"keywords": [],
"author": "lizzy",
"license": "ISC",
"dependencies": {
"jquery": "^3.1.1",
"swiper": "^3.4.1"
},
"devDependencies": {
"autoprefixer": "^6.3.5",
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"imports-loader": "^0.7.0",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"postcss-loader": "^1.2.1",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"uglify-loader": "^1.2.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.12.1"
}
}
具体举例,请见:https://github.com/Lizzy07/Re...
npm install
npm run start
localhost:8080
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。