webpack-dev-server - webpack如何配置打包? 打包后像一般的那样 css在css文件夹里 js在js文件夹里 的这种
本文介绍了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屋!
查看全文