Webpack 및 PostCSS로 핫 리로딩 사용

텍스트 편집기에 스타일 시트를 저장할 때 창을 뜨겁게 다시로드하려고합니다. 현재 페이지를 수동으로 새로 고침하여 변경 사항을 확인해야합니다. 다음은 처리 CSS를 처리하는 내 웹팩 구성 파일의 코드 조각입니다 :Webpack 및 PostCSS로 핫 리로딩 사용

module: { 
    rules: [ 
    { 
     test: /\.js$/, 
     exclude: path.resolve(__dirname, 'node_modules'), 
     loader: 'babel-loader', 
    }, 
    { 
     test: /\.css$/, 
     include: [`${PATHS.src}`, `${PATHS.modules}/normalize.css/normalize.css`], 
     use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
      { 
      loader: 'css-loader', 
      options: { 
       modules: true, 
       localIdentName: '[name]__[local]___[hash:base64:5]', 
       importLoaders: 1, 
      }, 
      }, 
      'postcss-loader', 
     ], 
     }), 
    }, 
    ], 
}

내가 웹팩 3을 사용하고는, 추출 텍스트 플러그인과 함께 웹팩 데브 서버 및 PostCSS. 감사!

출처

2017-10-16 iknowhtml

ExtractTextWebpackPlugin을 사용하여 CSS의 최신 다시로드를 사용하려면 수행해야 할 여러 단계가 있습니다.

1. 구성 웹팩-DEV-서버

devServer: { 
    host: '0.0.0.0', 
    port: 8080, 
    hot: true 
}

2. dev에 서버

entry: [ 
    'webpack-dev-server/client?http://0.0.0.0:8080', 
    // your other entry points 
]

에 대한 엔트리 포인트를 추가 HotModuleReplacementPlugin

plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
]

3. 추가

4. CSS 핫 로더

첫 번째 예는 ExtractTextPlugin를 포함하고 있기 때문에, 문서를 참조하십시오. 보기 here.

if (module.hot) { module.hot.accept(); }

그 단계를 제공해야합니다 :

5. 설정 당신의 .js에서 뜨거운 모듈 스크립트가 당신의 .js 진입 점 내부

을 엔트리 포인트, 다음과 같은 스크립트를 구현해야합니다 JS와 CSS 둘 다 핫 리로딩. 문제 나 질문이 있으면 알려주세요.

출처

2017-10-19 23:47:37

Webpack 구성 파일을 위에서 지정한대로 수정 했으므로 설명서에 지정된대로 css-hot-loader에 사용 된 concat 함수의 닫는 괄호에 예기치 않은 토큰 오류가 발생합니다. 오류를 일으키는 특정 코드는'[ 'css-hot-loader']. concat (. 나머지 구성)'입니다. – iknowhtml

앱 개발에는 ExtractTextPlugin을 사용할 필요가 없습니다. css에 로더를 사용하고 webpack.prod에 대한 별도의 설정이 필요합니다.

모듈과 함께 webpack.config에 devServer를 포함 시켰습니까?

그리고 webpack-dev-server로 앱을 실행해야합니다.

출처

2017-10-17 08:23:19

스타일 시트가 JS 번들과 분리되도록'ExtractTextPlugin'을 사용합니다. 그래서 브라우저에서 CSS를 수정할 수 있도록 그대로 유지하고 싶습니다. 이미 CSS에 로더를 사용하고 있습니다. 별도의 제작 Webpack 구성 파일이 없지만 사용 사례에는 필요하지 않다고 생각합니다. 마지막으로,'DevServer'는 이미 Webpack 설정 파일에 있습니다. – iknowhtml

나머지 구성 파일이 유용할까요? – iknowhtml

Webpack 및 PostCSS로 핫 리로딩 사용

답변

관련 문제