零基础学习Webpack—02(Webpack打包CSS/Less样式资源)

1. 初始化npm

npm init
复制代码

2. 全局安装webpack和webpack-cli

npm i webpack webpack-cli -g
复制代码

3. 将webpack添加到package.js的开发依赖

npm i webpack webpack-cli -D
复制代码

4. 创建src文件夹，并建立入口文件index.js

• index.js文件

function add(x,y) {
    return x + y;
}

console.log(add(1,2));
复制代码

5. 运行指令

• 开发环境

webpack ./src/index.js -o ./build/built.js --mode=development
复制代码

上面这个指令的意思是将index.js文件打包后输出到built.js，整体打包环境是开发环境。

• 生产环境

webpack ./src/index.js -o ./build/built.js --mode=production
复制代码

6. webpack能够处理js/json资源

• 下面的json文件，webpack是能够进行打包的

{
    "name": "justin",
    "age": 18
}
复制代码

7. Webpack不能处理CSS/img等其他资源

8. 如何使Webpack能够处理CSS样式资源

1. 在src同一级而不是内部，建立webpack.config.js(注意：配置中的语法是基于CommonJs的语法的)
2. 在webpack.config.js中添加如下代码

// resolve用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        filename: 'built.js',
        // 输出路径  __dirname指的是当前文件上一层文件夹的绝对路径
        path: resolve(__dirname,'build')
    }，
    // loader的配置
    module: {
        rules: [],
    }
    // plugins的配置
    plugins: [
        {
            // 匹配哪些文件
            test: /\.css$/,
            // 使用哪些loader进行处理
            use: [
                // 创建style标签，将js中的样式资源添加到head中生效
                'style-loader',
                // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                'css-loader'
            ]
        }
    ],
    // 模式
    mode: 'development'
}
复制代码

3. 安装相关包文件然后运行webpack

npm i
npm i webpack webpack-cli -D
npm i css-loader style-loader -D
webpack
复制代码

9. Webpack处理less样式资源

• 不同文件类型需要配置不同的loader

1. 下载less-loader

npm i less-loader
复制代码

2. 下载less

npm i less -D
复制代码

3. 修改webpack.config.js中的module中的rules

• 添加下面一个对象

{
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}
复制代码

欢迎大家关注我的专栏，一起学习Webpack~~