webpack打包css

最新推荐文章于 2024-03-29 04:17:08 发布

一天不学习感觉像头猪

最新推荐文章于 2024-03-29 04:17:08 发布

阅读量204

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_29116547/article/details/88926630

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注意：写这个笔记的时候webpack版本是：

$ webpack -v
4.29.6

本地安装webpack

npm init -y
npm install webpack webpack-cli --save-dev

要捆绑lodash依赖项index.js，需本地安装库

npm install --save lodash

css配置

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

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    我在这里看书！
</div>
<script src="../dist/js/indexbundle.js"></script>
</body>
</html>

webpack.config.js

const path = require('path');

  module.exports = {
    entry: './src/index.js',  //入口路径
    output: {                 //出口路径
      filename: 'js/[name]bundle.js', 
      path: path.resolve(__dirname, 'dist')
    },

//加载css
   module: {
    rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  };

src / style.css

.box{
    color: red;
    font-size: 30px;
}

src / index.js（重点是这个css路径）

'use strict';
require("!style-loader!css-loader!./index.css");

package.json

{
  "name": "Dema-wfs",
  "version": "1.0.0",
  "description": "电商网站项目",
  "main": "index.js",
  "dependencies": {
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "webpack": "^1.15.0",
    "webpack-cli": "^3.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "webpack"  //重点是这个，用命令运行的时候可以这样：npm run pack就可以了
  }, 
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BiFuo/Dema-wfs.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/BiFuo/Dema-wfs/issues"
  },
  "homepage": "https://github.com/BiFuo/Dema-wfs#readme"
}

注:只有webpack版本为4x以上才适用