1. 创建项目
1.1 初始化一个项目
首先安装nodejs，打开 nodeJs官网 直接下载安装即可，安装完毕后打开命令行工具，进入你的项目文件夹
webpack-demo
执行
npm init -y
-y代表一路默认
或者
npm init
过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息，可以不填一路回车，执行完毕后会在根目录下创建一个 package.json 文件，这样就初始化结束了。
1.2 安装webpack
由于在webpack4中已经不再默认安装 webpacl-cli，所以我们要手动安装，在命令行执行
npm i webpack webpack-cli -D
1.2.1
理解：--save 、--save-dev 、-D、-S 的区别
npm install = npm i
npm run start = npm start // 对应package.json里的"scripts"里的"start"命令
--save = -S 自动把模块和版本号添加到dependencies。
--save-dev = -D 自动把模块和版本号添加到devdependencies。
个人理解的区别用大白话来解释说就是：
-D代表开发阶段才需要使用的组件，不会进行最后的真正打包，只是用来转换的；
-S代表生产阶段使用的，是在程序开发中协助运行的
//package.json
{
"name": "demo",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "w",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
},
"dependencies": { //--save=S
"@antv/f2": "^3.3.5",
"axios": "^0.18.0",
"better-scroll": "^1.14.1",
"echarts": "^4.1.0",
"js-md5": "^0.7.3",
"md5": "^2.2.1",
"qs": "^6.6.0",
"v-charts": "^1.19.0",
"v-echarts": "^1.0.2",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.0",
"vue-router": "^3.0.1"
},
"devDependencies": {//--save-dev = -D
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
}
}
不过这只是它们的表面区别。它们真正的区别是，
npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。
即devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 vue-loader 时，我们采用的是 “npm install –save-dev vue-loader ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。
举例：
像vue框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了，这是dependencies。而写 ES6 代码，需要babel转换成es5，转换完成后，我们只需要转换后的代码，上线的时候，直接把转换后的代码部署上线，不需要babel了，上线了不需要，这就是devDependencies。
而如果用了 vue，由于发布之后还是依赖vue，所以是dependencies。
对于大多数项目，建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。
以下为全局安装（不建议）
npm i --global webpack
- 打包第一个JS文件
首先，我们在根目录下创建一个 webpack.config.js 文件和一个src文件夹。然后在src中创建一个 main.js 文件
在 main.js 中写一行
alert('hello world')
然后打开 webpack.config.js ，进行webpack的配置：
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
}
}
module.exports = config
我们设置了一个名为 main 的入口，并以 src 下的 main.js 作为入口文件，然后输出到根目录下的 dist 文件夹中。
在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，两种环境的不同配置后面的博文会详解，这里我们设置为 'none' ，来避免默认操作。前文已经说过，path 是 nodeJs中的核心模块用来操作路径，__dirname 表示文件的当前路径（此时为根路径）。而 output中的filename属性，[name] 表示入口的名称，此处就是 main。
接下来打开 package.json 文件，来编写一条命令执行webpack的打包。在 "scripts":{} 中添加：
"build": "webpack --config webpack.config.js --progress --colors"
webpack --config path/to/your/file/file.js 表示执行某个配置文件，--progress可以让我们看到打包的进度 ， --colors 开启命令行颜色显示，更多的webpack命令参数大家可以另行查阅。
然后就可以在命令行执行：npm run build，执行完毕后，我们可以看到，在根目录下多了一个 dist 文件夹 并有一个 main.bundle.js文件，这就是webpack为我们打包出来的静态资源，而文件路径就是我们在 output 中设置的值。
为了演示打包好的 main.bundle.js ，我们在根目录下创建一个 index.html ，并引入main.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>
在浏览器中打开 index.html，可见main.js中的代码已经被执行了：
在IDE中打开main.bundle.js，代码的最底部可以看到我们在main.js中写的代码。
第一次 webpack 打包就成功了。
网友评论