使用webpack4.x构建项目的步骤
目录
一、运行npm init -y
二、创建目录
三、在src下创建index.html
四、使用cnpm安装
五、注意
创建基本的webpack4.x项目
1、运行npm init -y
首先创建一个文件夹名位01.webpack-base，在使用Visual Studio Code打开。打开之后我们要先快速初始化一个项目，代码：npm init -y。它会创建package配置文件。以后创建的包什么的都会在这里面来记录。
2、 创建目录
在01.webpack-base旁边有一个新建项目的（如下图：），
新建一个src项目，用来存放所有项目的原代码。还有一个是dist文件，为什么使用dist因为react创建的时候/dist的路径，这个dist代表的是项目做好之后发布的一个产品，最终要发布在我们的dist里面中去，开源也是这样做的。
3、 在src下创建index.html
在src下面新建一个index.html，代码如下：
代码：
<! 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>Index首页</title>
</head>
<body>
<h1>这是首页</h1>
</ body>
</html>
在src下创建一个main.js文件，代码如下：
代码：
// 假设，main.js 还是我们的入口文件
Console.log(‘ok’)
4、 使用cnpm安装
配置淘宝镜像，但是使用npm就直接自己装了，在终端安装。（代码如下：）
代码：
cnpm I webpack webpack-cli -D
*全局运行 ‘npm I cnpm -g’
点开package.json查看版本：
代码：
"name": "01.webpack-base",
"version" : "1.0.0",
"description": "",
"main": "index.js",
"scripts" : {
"test": "echo \"Error: no test specified\" && exit 1"},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpacki: "^4.1.1"
}
}
但是还是要去传一个包，代码：cnpm I webpack-cli -D。
在终端输入，webpack就可以进入打包空间。之前进入打包空间，在package.json创建一个dev。在script里面添加一个“dev”：“webpack”，后面在指定一个配置文件。在终端里面输入webpack或者在package.json里面的script中添加dev，都是一样的。“dev”：“webpack”是webpack命令行提供的。重新在到终端打一次包，它就报了一次警告：
代码：
WARNING in configuration
The 'mode’ option has not been set. Set 'mode’option to
'development’ or 'production’to enable default:for this
environment.
打包失败！大概意思是：没有设置mode这个选项。Webpack有一个配置文件，在src下创建webpack.Config.js的一个js文件。Webpack.config.js代码如下：
代码：
//向外暴露一个打包的配置对象;因为webpack是基于Node构建的;所以 webpack支持所有Node API 和语法
module.exports = {
mode: 'development' //development production
}
//行不行 目前不行
export default {}
然后在使用webpack，在报错。
代码：
ERR0R in Entry module not foundT Eror: Can't resolve './snc'
in 'c: lUsers\liulongbin\Desktoplreact-day八代
\e1.webpack-base'
这个主要报错的是没有找到入口文件，是因为在webpack.config.js中没有配置入口文件。
在 webpack 4.x中，有一个很大的特性，就是约定大于配置约定，默认的打包入口路径是src -> index.js
已经有了这个就不需要了，所以把main.js重新命名一下，改为index.js。（代码如下：）
代码：
//假设，main.js还是我们的入口文件
Console.log(“ok”)
就不用写option，它默认是把src下的index.js当作入口，然后在到终端里面去输入webpack。
然后结果为，下列代码：
Hash: 423ac0b62c60f9ef8e85Version: webpack 4.1.1
Time: 100ms
Built at: 2018-3-1910:57:03AssetsizeChunks chunk Names
main.js2.85 KiBmain [emitted]main
Entrypoint main = main.js
[./ src/index.is142 bytes {main}「built]
文件打包好后会在dist中出现一个js文件，main.js文件，可以打开观察一下。
然后把这个js文件手动导入进index.html中去，导入到head标签里面，导入这行代码<script srC=" ../dist/main.js"></script>，然后保存，在到浏览器中去看（如下图：）。
把webpack.config.js中的mode中的ok改为production，然后在到终端打包，在卡main.js文件。
代码：
function(e) { var n=( } ;function r(t)《if(n[t])return n[t].exports ;var o=n[t]=(i:t,T J,e嗟石} ;return e[t].call(o.exports,o ,o.exports ,r ) , o.1=!0 ,o.exports }r.m=e ,r.c=n,r.d=iunction(e,n,t){(r.o(e ,n)ll0bject.defineProperty(e,n , {configurable: !1,enumerable:! 0 ,get:t}) } ,r.z=function(e){bject.defineProperty(e , "_esModule" ,{value:!0}) } ,r.n=function(e) {var n=e&ke._esModule?function() {return e.default} : function() {return e) ;return r.d(n , " a " ,n) ,n} ,r.o=function(e,n){return Object.prototype .hasOwnProperty.call(e,n) } ,r.p="" ,r(r.s=0)》( [function(e,n) {console.log("ok ")}]);
5、 注意: webpack 4.x提供了约定大于配置的概念;目的是为了尽量减少配置文件的体积;
默认约定了:
打包的入口是src-> index.js
打包的输出文件是dist-> `main.js |
