webpack笔记一使用webpack打包_build 的时候报lodash value.js错误-优快云博客

webpack入门一使用webpack打包

用于编译javascript模块的工具，命令知道会用就行。

官方文档 https://webpack.js.org/guides/getting-started/

入门体验

// 创建一个demo文件夹
mkdir webpack-demo
// 进入文件夹
cd webpack-demo
// 初始化
npm init -y
// 安装webpack依赖
npm install webpack webpack-cli --save-dev

在webpack-demo文件夹下创建如下文件

webpack-demo
  |- package.json // 这是自动创建的
+ |- index.html
+ |- /src
+   |- index.js

src下新建index.js文件

import _ from 'lodash';

function component() {
    const element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

安装lodash

npm install --save lodash

运行npx webpack
它将脚本src/index.js作为入口点，
并将生成dist/main.js作为输出。

然后再创建dist/index.html,引入打包好的main.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试webpack</title>
</head>
<body>

</body>
<script src="main.js"></script>
</html>

使用配置文件

webpack-demo
  |- package.json
+ |- webpack.config.js

加入内容

const path = require('path');

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

再次使用新的配置文件，重新构建

npx webpack --config webpack.config.js

把上述命令集成
修改package.json添加build自定义命令

// script里面添加
 "build": "webpack --config webpack.config.js"

然后就可以使用熟悉的命令打包了

npm run build

启动本地开发服务

安装依赖

npm add webpack-dev-server --save-dev

启动命令

npx webpack-dev-server

webpack简单配置开发服务, webpack.config.js

devServer: {
        port: 8810, // 端口
        progress: true, // 加载滚动条
        contentBase: './dist', // 以这这个文件夹为基础路径
        compress: true // 启动压缩
},

开发服务启动命令写到package.json里面