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。