webpack: webpackdemo

/**
  * demo1
  * 入口和出口
  */
// path是nodejs的路径处理插件
const path = require('path');
module.exports = {
    // 模式 production-生产环境  development-开发环境
    mode: 'development',
    // 入口
    entry: './main.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main-webpack.js'
    }
  };

loader配置

在webpack眼里,一切皆模块,js、css、img、txt、vue等统统都是模块，但webpack默认只认识js模块，其它文件都需要配置相应的加载器（loader）才能正确的识别，比如css要配css-loader，vue要配vue-loader

配置css-loader

npm init 初始化package.json
npm i style-loader --save-dev 安装style-loader
npm i css-loader --save-dev 安装css-loader
配置webpack.config.js

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

创建main.js

require('./style.css');

console.log('在这里做的别的事情')

创建style.css

body {
    background: gray;
}

运行打包命令 webpack
检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main-webpack.js,然后打开,看网页的背景颜色是否为灰色

配置less-loader

安装less 和 less-loader

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

webpack配置

// path是nodejs的路径处理插件
const path = require('path');
module.exports = {
    // 模式 production-生产环境  development-开发环境
    mode: 'development',
    // 入口
    entry: './main.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main-webpack.js'
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
  };

新建main.js和app.less

require('./app.less');
console.log('在这里做的别的事情')

div {
    h3 {
        color: red;
        font-size: 30px
    }
}

检验: 在dist文件夹新建index.html,打开看看h3是否变了颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./main-webpack.js"></script>
</head>
<body>
    <div>
        <h3>
            这是h3
        </h3>
    </div>
</body>
</html>

清流前端 / webpack

目录

安装

nodejs的模块系统

入口和出口配置

loader配置

简介

发行版

贡献者

近期动态

清流前端 / webpack .gitee-modal { width: 500px !important; }

目录

安装

nodejs的模块系统

入口和出口配置

loader配置

简介

发行版

贡献者

近期动态

搜索帮助

清流前端 / webpack