webpack 2.2.1에 자동 프리픽스 추가하기

Question

webpack 2.2.1에 autoprefixer를 추가하고 접두사를 보는 데 문제가 있습니다. postcss-loader https://github.com/postcss/postcss-loader이 webpack에서 postcss를 처리하는 나열된 방법 인 것 같습니다.

현재 내 반응 파일로 가져 오는 scss 파일을 사용하고 있습니다. 예 : '../../styles/header.scss'에서 가져 오기 스타일; 이것은 sass-loader를 사용하여 webpack에서 처리됩니다.

설치 프로그램에서 오류가 발생하지 않지만 내 파일에 자동 고침 해결 기능이 표시되지 않습니다. 나는 이것이 생산이 아닌 개발에만 추가 될 필요가 있다고 추정한다.

여기 내 dev 설치 webpack 구성입니다.

const path = require('path') 
const webpack = require('webpack') 

const ROOT_DIR = path.resolve(__dirname, '../app') 

    module.exports = { 
     devtool: 'eval', 

     entry: [ 
     `${ROOT_DIR}/js/index`, 
     'webpack-hot-middleware/client' 
     ], 

     output: { 
     path: path.resolve(__dirname, '../public'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
     }, 

     plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      "config.ASSET_URL": JSON.stringify(process.env.ASSETS_URL), 
      "config.GA_TRACKING_ID": JSON.stringify(process.env.GA_TRACKING_ID) 
     }) 
     ], 
     module: { 
     loaders: [ 
      { test: /\.js?$/, 
      loader: 'babel-loader', 
      include: path.join(__dirname, '../app'), 
      exclude: /node_modules/ 
      }, 
      { test: /\.scss?$/, 
      include: path.join(__dirname, '../app', 'styles'), 
      use: [ 
       'style-loader', 
       'css-loader', 
       { 
       loader: 'postcss-loader', 
       options: { plugins: [ 
        require('autoprefixer') 
       ] } 
       }, 
       { 
       loader: 'sass-loader', 
       options: { 
        data: "$assetPath: '" + process.env.ASSETS_URL + "';" 
       } 
       } 
      ] 
      }, 
      { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      include : path.join(__dirname, '../app', 'images'), 
      loader : 'file-loader?limit=30000&name=[name].[ext]' 
      }, 
      { 
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
      include : path.join(__dirname, '../app', 'fonts'), 
      loader: 'file-loader?name=fonts/[name].[ext]' 
      } 
     ] 
     } 
    } 

Answer 1

나는 최근에 언젠가는 비슷한 것을 다루어야했다./:이 대답 https를 참조하십시오 그것을

//postcss.config.js 
module.exports = { 
    plugins: [ 
     require('autoprefixer') 
    ] 
} 

에와 웹팩 설정

{ test: /\.scss?$/, 
    include: path.join(__dirname, '../app', 'styles'), 
    use: [ 
     {loader: "style-loader"}, 
     {loader: "css-loader"}, 
     {loader: "postcss-loader"}, 
     {loader: "sass-loader", 
     options: { 
      data: "$assetPath: '" + process.env.ASSETS_URL + "';" 
     } 
     } 
    ] 
    },