html防替换资源,webpack中静态资源替换

用这个 extract-text-webpack-plugin， 最近刚好在学 webpack

webpack.config.js

var path = require("path");

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

context: path.resolve("js"),

entry: ["./app.es6", "./utils.js"],

output: {

path: path.resolve("build"),

publicPath: "/public/",

filename: "bundle.js"

},

devServer: {

contentBase: 'public'

},

plugins: [

new ExtractTextPlugin('styles.css')

],

module: {

loaders: [

{

test:/\.css$/,

exclude: /node_modules/,

loader: ExtractTextPlugin.extract("style-loader","css-loader")

},

{

test:/\.scss$/,

exclude: /node_modules/,

loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader")

},

{

test: /\.es6$/,

exclude: /node_modules/,

loader: "babel",

query: {

// https://github.com/babel/babel-loader#options

cacheDirectory: true,

presets: ['es2015', 'stage-2']

}

}

]

},

devtool: "#inline-source-map",

resolve: {

extensions: ['', '.js', '.es6']

}

}

app.es6

require('../css/base.css');

require('../css/test.scss');

import { login } from './login.es6';

login('xxx', 'wwww');

document.write("welcome to use webpack !");

console.log("app loaded");

index.html

Css Loader

Sass Loader