为什么webpack打包只有output了js?
图片、css怎么没output?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
index: './js/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
// loader: 'style-loader!css-loader'
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap!postcss'
// loader: ExtractTextPlugin.extract('style-loader', 'css!sass')
},
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
},
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
contentBase: './', // 指定本地服务器所加载的页面目录
colors: true, // 设置为true,使终端输出的文件为彩色
historyApiFallback: true, // 如果设置为true,所有的跳转将指向index.html
inline: true, // 设置为true,当源文件改变时会自动刷新页面
hot: true,
process: true,
port: '8080' // 设置默认监听端口,如果省略,默认为”8080“
},
devtool: '#eval-source-map',
postcss: [
require('autoprefixer')
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin('[name].css')
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
index.js
import '../css/common.scss';
import '../css/index.scss';