Node.js webpack入门

文档

webpack中文网 https://www.webpackjs.com/concepts/

node.js必备插件

• Babel: Babel is a JavaScript compiler.
  https://babeljs.io/

第一步，使用snapd安装node.js

要在CentOS下安装snapd，请查看 https://www.cnblogs.com/develon/p/12192120.html

sudo snap install node --channel 13 --classic

现在，npm、npx、node命令可用。
使用以下代码初始化一个项目。

mkdir App
cd !$
npm init -y

第二步，安装webpack到项目（作为开发依赖）

官方推荐本地安装

npm i -D webpack webpack-cli webpack-dev-server

相应的可执行文件安装在./node_modules/.bin目录下，要执行它们，可以使用npm脚本或者npx命令：

{
  "name": "app",
  "version": "1.0.0",
  "description": "A simple web app.",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --host '0.0.0.0' --open", // 实时重载的本地开发服务器，--open表示自动打开浏览器
    "autobuild": "webpack --watch", // 观察模式，当目录变化时自动编译
    "build": "webpack" // 编译默认入口文件src/index.js，打包为dist/main.js
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.2"
  },
  "dependencies": {
  }
}

要运行这些npm脚本，执行

npm run build
# 在 -- 之后可以传递参数
sudo npm run dev -- --port 80

或者使用npx命令，它将优先使用node_modules/.bin下的程序：

npx webpack

要控制webpack的更多细节，我们可以编辑/创建webpack配置文件(默认为./webpakc.config.js)：

const path = require('path');

module.exports = {
    devtool: 'inline-source-map', // 追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。

    entry: {
        app: './src/index.js',
    },

    devServer: { // webpack-dev-server 相关配置
        contentBase: './dist',
    },

    output: {
        filename: 'js/[name]/main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

现在，执行命令npx webpack，将会打包代码至dist/app/main.js。

END