webpack ----- 第一章

Posted 2020-10-12 不乱来的嫖客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack ----- 第一章相关的知识，希望对你有一定的参考价值。

废话不多说，直接走实战！！！

1、桌面新建一个文件夹：webpack_test

2、在webpack_test文件夹下面新建一个文件夹demo01

3、然后又在demo01文件夹下面建立两个js文件main.js和index.js文件

4、在index.js中写一个函数并导出

//声明一个函数并用export导出
export function add(a, b) {
    console.log (a + b);
}

5、在main.js中导入index.js中的函数，并调用

import {add} from ‘./index.js‘
add(3, 5);
add(78, 100);

6、再在根目录webpack_test下创建一个文件index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我学习webpack</title>
</head>
<body>
</body>
</html>

7、然后在根目录webpack_test下新建一个webpack.config.js的文件，并写配置规则

const path = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
config = {
    entry: {
            main:‘./demo01/main.js‘
    },
    output: {
        path: path.resolve(__dirname, ‘dist‘)   //指定出口文件的路径
        filename: ‘[name].js‘   //这是一个上面背景颜色一样的 Chunk name，也可以指定出口路径如规定 ‘./[name].js‘出口就会在js这个文件夹下
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: ‘babel-loader‘
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
             filename: ‘index_webpack.html‘,
             template: ‘index.html‘
        })
    ]
}
module.exports = config

8、在终端安装各种包

npm init 初始化一下
cnpm install webpack --save-dev 下载webpack模块
cnpm install babel-loader 这个包允许使用 Babel 和 Webpack 转换javascript文件
cnpm install babel-core 解释js的文件

html-webpack-plugin 下载所需要的插件

9、然后使用webpack编译一下即可,打开的时候去dis目录下打开index_webpack.html

以上是关于webpack ----- 第一章的主要内容，如果未能解决你的问题，请参考以下文章

webpack4常用片段

玩转webpack 全方位掌握webpack核心技能和优化策略