https://www.webpackjs.com/guides/getting-started/
站点目录 /app
站点文件
/app/dist/index.html 输入以下内容
~~~
起步
~~~
main.js是打包后生成的压缩文件
/app/package.json 输入以下内容配置路径
~~~
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
~~~
暴露路径,filename写js文件的名字,path里面dist里面写文件夹的名字,如果有调整要记得更改
/app/src/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());
~~~
~~~
在安装一个要打包到生产环境的安装包时,你应该使用 npm install --save,如果你在安装一个用于开发环境的安装包(例如,linter, 测试库等),你应该使用 npm install --save-dev。请在 npm 文档 中查找更多信息。
~~~
打包项目
npx webpack --mode development