webpack学习笔记一

最新推荐文章于 2024-06-06 15:58:32 发布

liujunfei_ff

最新推荐文章于 2024-06-06 15:58:32 发布

阅读量102

点赞数

分类专栏： webpack 文章标签： webpack

原文链接：https://www.webpackjs.com/guides/getting-started/

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

新建一个文件夹webpack-demo.进入这个空文件,然后局部安装webpack和webpack-cli （不推荐全局安装，如果全局安装后又执行了局部安装，需要执行一次 npm link webpack --save-dev 重联到局部node_modules）

npm init -y
npm install webpack webpack-cli --save-dev

在这里插入图片描述
新建几个文件 src/index.js dist/index.html

//index.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>起步</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

//index.js
    import _ from 'lodash'
    function component() {
        var element = document.createElement('div');
    
        // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    
        return element;
    }
    
    document.body.appendChild(component());

安装lodash
npm install --save lodash

修改package.json
在这里插入图片描述
新建webpack.config.js

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

run npm run build

浏览器打开index.html 出现Hello webpack

liujunfei_ff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习笔记一

新建一个文件夹webpack-demo.进入这个空文件npm init -ynpm install webpack webpack-cli --save-dev（会有一些报错，一般不影响）新建几个文件 src/index.js dist/index.html//index.html<!doctype html><html><head> ...
复制链接

扫一扫