javascript - webpack构建怎么打包源文件?
ringa_lee
ringa_lee 2017-04-10 17:37:31
[JavaScript讨论组]

为什么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';
ringa_lee
ringa_lee

ringa_lee

全部回复(2)
PHP中文网

webpack的核心只管js,css啊图片啊字体文件啊之类的要靠loader来输出,看下面这两篇文章:

  • 《webpack多页应用架构系列(五):听说webpack连less/css也能打包?》

  • 《webpack多页应用架构系列(六):听说webpack连图片和字体也能打包?》

阿神

简单来说就是webpack打包出来的css都是js方式添加到页面中去的,看上面array_huang给出的教程5里面,用ExtractTextPlugin来获得css形式的文件

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号