独立打包成样式文件

最新推荐文章于 2022-08-27 11:52:20 发布

denghut882925

最新推荐文章于 2022-08-27 11:52:20 发布

阅读量132

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/ertingbo/p/7058471.html

版权

八：如何独立打包成样式文件

有时候我们不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要 extract-text-webpack-plugin 来帮忙：我们首先需要安装 extract-text-webpack-plugin：如下： npm install extract-text-webpack-plugin –save-dev 如下所示：

然后在目录下会生成如下：

现在我们需要看看webpack.config.js 配置变成如下：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 使用webpack打包
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "build.js"
  },
  module: {
    loaders: [
      //.css 文件使用 style-loader 和 css-loader 来处理
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(
            'css?sourceMap!' +
            'less?sourceMap'
        )
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  // 内联css提取到单独的styles的css
  plugins: [new ExtractTextPlugin('styles.css')]
};

配置完成后我们gulp运行下即可，在build文件夹内会生成2个文件，一个是build.js 处理模块的文件另一个就是我们的styles.css了；我们查看下如下所示：

接着在html文件这样引入即可：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="src/react.min.js"></script>
  <link rel="stylesheet" href="build/styles.css"/>
 </head>
 <body>
    <div id="content"></div>
    
 </body>
</html>

在页面上运行以下；即可看到效果：我们可以看下请求数：

【我是操作没成功】

转载于:https://www.cnblogs.com/ertingbo/p/7058471.html

denghut882925

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
独立打包成样式文件

八：如何独立打包成样式文件有时候我们不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要extract-text-webpack-plugin来帮忙：我们首先需要安装extract-text-webpack-plugin：如下：npminstallextract-text-webpack-plugin–save-dev如下所示：...
复制链接

扫一扫