webpack中静态资源替换

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

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

阅读 10.2k

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

webpack中静态资源替换

webpack.config.js

app.es6

index.html

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

请问nodejs如何定义全局变量？

webpack中静态资源替换

webpack.config.js

app.es6

index.html

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

请问nodejs如何定义全局 变量？

请问nodejs如何定义全局变量？