webpack中静态资源替换

刚刚上手webpack,发现是css,js合并到一个bundle里进行动态插入,现在想问问如何在开发时按以前古老的方法引入js和css开发,等到build的时候在做打包?主要在于html中的静态资源替换不知道用什么方法好.

我知道webpack有热替换,但是在js文件达到一定大小的时候热替换还是很慢的,想着在开发环境直接用原始文件引入,到生产环境的时候打一次包就可以.不知道有这个办法没有.

用这个 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

<html>
<head>
<link rel="stylesheet" href="/public/styles.css"/>
<script src="/public/bundle.js"></script>
</head>
<body>
<div class="red">Css Loader</div>
<a>Sass Loader</a>
</body>
</html>

可使用browser-sync来刷新，很快就能看到修改代码后的效果，可参考我项目的配置
https://github.com/eteplus/vue-sui-demo

config里面有个external选项，可以引入用script标签加的载js

发布时可以去掉这个选项，让webpack从本地打包这个文件

【热门文章】