                        課程
                    
                        /前端開發
                        
                            /前端工具
                        
                        /webpack深入與實戰

webpack.config.js的代碼，親測能正常運行。——20170406

var?htmlWebpackPlugin=require('html-webpack-plugin');
var?webpack=require('webpack');
var?path=require('path');
module.exports={
????context:__dirname,
????entry:'./src/app.js',
????output:{
????????path:path.resolve(__dirname,'./dist'),
????????filename:'js/[name].bundle.js'
????},
????module:{
??????rules:[
??????????{
??????????????test:/\.js$/,
??????????????loader:'babel-loader',
??????????????exclude:path.resolve(__dirname,'/node_modules/'),
??????????????include:path.resolve(__dirname,'/src/'),
??????????????query:{
??????????????????presets:['latest']
??????????????}
??????????},
??????????{
??????????????test:/\.css$/,
??????????????use:[
??????????????????{
??????????????????????loader:'style-loader'
??????????????????},
??????????????????{
??????????????????????loader:'css-loader',
??????????????????????options:{
??????????????????????????importLoaders:1
??????????????????????}
??????????????????},
??????????????????{
??????????????????????loader:'postcss-loader'
??????????????????}
??????????????]
??????????}
??????]
????},
????plugins:[
????????new?htmlWebpackPlugin({
????????????filename:'index.html',
????????????template:'index.html',
????????????inject:'body'
????????}),
????????new?webpack.LoaderOptionsPlugin({
????????????options:{
????????????????postcss:function(){
????????????????????return?[
????????????????????????require('autoprefixer')({
????????????????????????????broswers:['last?5?versions']
????????????????????????})
????????????????????]
????????????????}
????????????}
????????})
????]
};

aSuncat

2017-04-06

源自：webpack深入與實戰 4-4

關注問題我要回答

4032

操作

收起

6 回答

慕粉0057303747 回答被采納 +3 積分
2017-04-08

可以運行，試過了，謝謝

0 回復有任何疑惑可以回復我~

收起回答

daguaishou
2017-06-29

在這樣寫才不會報錯，plug不用謝就可以了。

{

? ? test:/\.css$/,

? ? //loader:'style-loader!css-loader!postcss-loader' //添加對樣式表的處理

? ? use:[

? ? {

? ? loader:'style-loader'

? ? },

? ? {

? ? loader:'css-loader',

? ? options:{

? ? importLoaders:1

? ? }

? ? },

? ? {

? ? loader:'postcss-loader',

? ? options: { ? ? ? ? ? // 如果沒有options這個選項將會報錯 No PostCSS Config found

? ? ? ? ? ? ? ? ? ? ? ? ? ? plugins: (loader) => [

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-import')({root: loader.resourcePath}),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('autoprefixer')(), //CSS瀏覽器兼容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('cssnano')() ?//壓縮css

? ? ? ? ? ? ? ? ? ? ? ? ? ? ]

? ? ? ? ? ? ? ? ? ? ? ? }

? ? }

? ? ]

? ?},

0 回復有任何疑惑可以回復我~

收起回答

韓鑫

親測，此法無效

2017-06-29 回復有任何疑惑可以回復我~

慕仔3155523

感謝能用了

2017-09-01 回復有任何疑惑可以回復我~

若兮
2017-05-18

改為這個就可以了，自己測試過的

{
????????test: /\.css$/,
? ? ? ? use: ExtractTextPlugin.extract({
? ? ? ? ? ? use: [
? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? loader: 'css-loader'
? ? ? ? ? ? ? ? ?}, {
? ? ? ? ? ? ? ? ? ? loader: 'postcss-loader',
? ? ? ? ? ? ? ? ? ? ? ? options: {
? ? ? ? ? ? ? ? ? ? ? ? ? ?plugins() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? browsers: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'>1%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'last 2 versions',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'Firefox ESR',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'not ie < 9'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ? ? ? ? ?]
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?]
? ? ? ? })
},

1 回復有任何疑惑可以回復我~

收起回答

Sccong

這個方法有效

2017-07-01 回復有任何疑惑可以回復我~

qq_安靜先生_03717455

嗯這個有效同學們如果格式報錯把plugins(){}改為plugins:function(){}

2017-11-12 回復有任何疑惑可以回復我~

VIABO
2017-05-12

我也遇到這個坑，看了文檔，除了樓主這種解決方式還有兩種應該可以，一種是可以在同目錄下增加一個postcss.config.js去設置組件，具體設置參考https://www.npmjs.com/package/postcss-loader

還有一種比較簡單的可以直接在module設置，如下：

{
? ?test: /\.css$/,
? ?use:[
? ? ? ?'style-loader',
? ? ? ?'css-loader',
? ? ? ?{
? ? ? ? ? ?loader:"postcss-loader",
? ? ? ? ? ?options:{
? ? ? ? ? ? ? ?plugins:[
? ? ? ? ? ? ? ? ? ?require('autoprefixer')({
? ? ? ? ? ? ? ? ? ? ? ?browsers:['last 5 versions']
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ?]
? ? ? ? ? ?}
? ? ? ?}
? ?]
}