本文出自:
方法在最下面
webpack.config.js
old
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
dashboard: ['./js-src/main.js']
},
output: {path: __dirname + "/dist", filename: 'js/[name].[hash].js', publicPath: "/"},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
use: [{loader: 'babel-loader'}],
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
}),
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}),
}, {
test: /\.(jpg|png|gif)$/,
use: ['file-loader?name=images/[name].[ext]'],
}, {
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: ['file-loader?name=fonts/[name].[ext]'],
}],
},
plugins: [
new ExtractTextPlugin({filename: 'css/[id].[hash].css'}),
new HtmlWebpackPlugin({
chunks: ['dashboard'],
filename: 'dashboard.html',
template: path.join(__dirname, "/dashboard-tmpl.html")
}),
new CopyWebpackPlugin([{from: 'lib/*', to: './'}]),
],
externals: { //全局引用
},
devtool: "#source-map"
};
new
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
dashboard: ['./js-src/main.js']
},
output: {path: __dirname + "/dist", filename: 'js/[name].[hash].js', publicPath: "./"},
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
use: [{loader: 'babel-loader'}],
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
}),
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}),
}, {
test: /\.(jpg|png|gif)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
// , {
// test: /\.(jpg|png|gif)$/,
// use: ['file-loader?name=images/[name].[ext]'],
// }
, {
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: ['file-loader?name=fonts/[name].[ext]'],
}],
},
plugins: [
new ExtractTextPlugin({filename: 'css/[id].[hash].css'}),
new HtmlWebpackPlugin({
chunks: ['dashboard'],
filename: 'dashboard.html',
template: path.join(__dirname, "/dashboard-tmpl.html")
}),
new CopyWebpackPlugin([{from: 'lib/*', to: './'}]),
],
externals: { //全局引用
},
devtool: "#source-map"
};
教程开始:
添加加载器url-loader
1.
npm install url-loader --save-dev
2.
rules修改为loaders
3.注释掉修改为:
// , {
// test: /\.(jpg|png|gif)$/,
// use: ['file-loader?name=images/[name].[ext]'],
// }
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
如何参数什么的请自行搜索
4.webpack即可