阮一峰教程webpack demo 练习合集 – webpack demo04

本文从零开始,逐步开始学习阮一峰老师的webpack demo教程。实现从0开始新建项目,到跑通整个demo小项目。逐渐加深对webpack的理解。

今天练习的是webpack demo04,主要是对CSS-loader的认识。

CSS-loader:css-loader 解释(interpret) @import 和 url() ,会 import/require() 后再解析(resolve)它们。

想要了解更多关于CSS-loader的信息,请移步webpack官网。想要下载阮一峰老师的整个webpack demo项目,请移步阮一峰gitHub仓库。

1、新建webpack-demo04项目文件夹
打开cmd切换到该目录下

2、执行初始化操作
npm init -y

3、安装webpack
npm install webpack webpack-cli –save-dev

4、修改package.json配置
添加”build”: “webpack -p

{
  "name": "demo04",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

5、新建webpack.config.js文件

const path = require('path')

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        //更改bundle.js最终生成的路径,我这里选择让它生成在根目录下,默认会在dist文件中
        path: path.resolve(__dirname, './')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

6、新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bundle.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

7、新建main.js文件

require('./app.css');

8、安装style-loader、css-loader
npm install style-loader css-loader –save-dev

9、执行编译,运行npm run build命令,npm无报错,生成bundle.js文件
打开浏览器看效果,正常显示。

至此阮一峰老师的webpack demo04小例子已经成功跑通。

相关文章:
阮一峰教程webpack demo 练习合集 – webpack demo02
阮一峰教程webpack demo 练习合集 – webpack demo03

标签: