webpack Javascript + CSS +字体+图片示例
示例
必修模块
npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader
资料夹结构
.
└── assets
├── css
├── images
└── jswebpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const glob = require('glob');
module.exports = {
entry: {
script: path.resolve(__dirname, './assets/js/app.js'),
style: path.resolve(__dirname, './assets/css/app.css'),
images: glob.sync(path.resolve(__dirname, './assets/images/**/*.*')),
},
context: __dirname,
output: {
path: path.resolve('./dist/assets'),
publicPath: '/dist/assets',
filename: '[name].js',
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}),
},
{
test: /(\.woff2?|\.woff|\.ttf|\.eot|\.svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=[name]-[hash:6].[ext]',
},
{
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file-loader?name=[name].[ext]',
},
],
},
plugins: [
new ExtractTextPlugin('app.css' /* optional: , { allChunks: true } */),
],
};glob.sync('./assets/images/**/*.*')将需要images文件夹中的所有文件作为条目。
ExtractTextPlugin将获取生成的输出并创建捆绑css文件。
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短