webpack-dev-server - webpack如何配置打包？ 打包后像一般的那样 css在css文件夹里 js在js文件夹里 的这种

问题描述

问 题

module.exports = {

//入口文件地址，不需要写完，会自动查找
entry:'./src/main',
//输出
output:{
    path: path.join(__dirname, './dist'),
    //文件地址，使用绝对路径形式
    filename: '[name].js',
    //[name]这里是webpack提供的根据路口文件自动生成的名字
    publicPath: '/dist/'
    //公共文件生成的地址
},

{
"name": "wxpj3",
"version": "1.0.0",
"description": "yhjm3",
"main": "main.js",
"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"

},

作为一个刚接触webpack的菜鸟 我是按照网上的教程来配置 大概明白了一点 但还是挺迷糊的 我这样配置 就生成一个js文件 但我想打包像一般的那样 css在css文件夹里 js在js文件夹里 的这种 该如何配置呢 真心求教！！！

解决方案

使用 extract-text-webpack-plugin

目录结构

src
    js
    css
    ...
dist
    js
    css
    ...

webpack配置

...
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    ...
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/[name].js',
        publicPath: '/dist/'
    },
    module: {
        loaders: [
            ...
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style',
                loader: 'css',
                publicPath: '../'
              })
            },
        ]
    },
    plugins: [
        ...
        new ExtractTextPlugin({
            filename: 'css/[name].css',
            disable: false,
            allChunks: false
          })
    ]
}

这篇关于webpack-dev-server - webpack如何配置打包？ 打包后像一般的那样 css在css文件夹里 js在js文件夹里 的这种的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！