webpack的简单使用（一）

最新推荐文章于 2023-01-04 17:02:19 发布

原创最新推荐文章于 2023-01-04 17:02:19 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

工具专栏收录该内容

7 篇文章

订阅专栏

本文介绍Webpack的基本用法，包括全局及项目内安装、配置文件编写、简单应用实例等，并演示了如何利用Webpack处理ES6语法及CSS文件。

第一步还是全部全局安装webpack（貌似很多工具都是要全局安装的）

npm i webpack -g

第二步项目内安装（–save-dev 可以用 -D 代替，作用是将webpack保存到依赖项中）

npm install webpack –save-dev

项目目录

app是开发目录，dist是生产目录，需要在根目录下新建html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>

接下来是webpack.config.js：

var path = require('path');

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname ,'dist')
    }
};

最后在app/index.js中，写个简单的 alert 函数查看效果

接下来运行 webpack。

效果图：

alert函数

上面是最简单的webpack使用。

如果app下有两个js，修改一下entry参数即可：

 entry: {
        bundle: './app/index.js',
        bundle1: './app/index1.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname ,'dist')
    }

运行 webpack 命令，就会输出 bundle.js 和 bundle1.js 。

接下来是编译是es6，编译es6必须安装 babel-loader 和 babel-preset-es2015（安装：npm install xx –save-dev）：

修改上面的两个index.js：
index1.js

const a = 3;
export default function(){
    return  a;
}

index.js

import app from './index1'

alert(app());

webpack.config.js:

...
module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }

运行 webpack 命令，查看效果：

alert函数

接下来是css-loader，需要安装 css-loader (安装方法同上）：
需要新创建一个css：

body {
    background: #333;
}

index.js 引用：

import css from './app.css'

webpack.config.js 修改：

...
    ...
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }

运行webpack命令，刷新页面可以看到背景变成暗色。

未完待续。。。