最简单的webpack打包
Posted Rain
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最简单的webpack打包相关的知识，希望对你有一定的参考价值。
因为浏览器识别不了es6的一些语法，所以我们写的代码需要处理成浏览器识别的语言，至于转换的这个工作就交给webpack来做了。
git:[email protected]:ghrGit/webpack001.git
1.先简单写几个待打包的文件
目录结构：
a.js
export default function a(){
console.log(‘module a‘);
}
b.js
export default function b(){ console.log(‘module b‘); }
app.js 为入口文件
import a from ‘./a‘; import b from ‘,/b‘; a(); b();
2.在demo1下运行npm init -y 生成一个默认的package.json 文件 并配置运行脚本
"dev":"webpack" 运行webpack，默认运行webpack.config.js文件
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1" } }
3.在demo1下运行npm i -D webpack 安装项目开发(-D)的依赖 webpack ， 会增加一个node_modules文件夹
4.新建一个dist文件夹，用于放置打包后的文件
5. 在demo1下 新建一个文件webpack.config.js (复制的话请把注释去掉)
const path = require(‘path‘); module.exports={ entry:‘./src/app.js‘,//打包入口 output:{ path:path.resolve(__dirname,‘dist‘),// 打包后文件的放置的绝对路径 filename:‘main.js‘ //打包生成文件的文件名 } }
6.在demo1下运行npm run dev 这个时候应该你打包后的文件main.js已经在dist文件夹下面了。
7.在dist新建一个index.html 文件，引入main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script src=‘./main.js‘></script> </html>
8.运行index.html 看console如图
以上是关于最简单的webpack打包的主要内容，如果未能解决你的问题，请参考以下文章