使用webpack打包前端工程2 CSS文件

webpack不仅能打包js还没打包css 图片字体等到生成的js里，是不是很神奇

dist/index.html

  <!doctype html>
  <html>
    <head>

    <title>Asset Management</title>
    </head>
    <body>

    <script src="./bundle.js"></script>
    </body>
  </html>

改成bundle.js，就需要自己写webpack配置了

npm install --save-dev style-loader css-loader

webpack.config.js 如果存在此文件名，则webpack默认会使用，不用指定--config

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
};

src/style.css

.hello {
  color: red;
}

src/index.js

  import _ from 'lodash';
import './style.css';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());

npm run build

效果没有生成单独的css文件打包到js里去了

--save-dev 下载后自动则package.json里写上依赖，供新安装npm install 使用

  "devDependencies": {
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },

css-loader负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
https://github.com/webpack-contrib/css-loader

style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。
element.classList.add('hello');
https://github.com/webpack-contrib/style-loader

一般2个一起安装使用

另外有less-loader和Sass loader

{
        test: /\.less$/,
        // 因为这个插件需要干涉模块转换的内容，所以需要使用它对应的 loader

          use: [
            'css-loader', 
            'less-loader',
          ],

      },

不把css打包到js里，可以用插件

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // 因为这个插件需要干涉模块转换的内容，所以需要使用它对应的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: 'css-loader',
        }), 
      },
    ],
  },
  plugins: [
    // 引入插件，配置文件名，这里同样可以使用 [hash]
    new ExtractTextPlugin('index.css'),
  ],
}...

https://juejin.im
掘金 — 一个帮助开发者成长的社区

使用webpack打包前端工程2 CSS文件

相关推荐

加入组织

联系我

近期文章