webpack4 打包步骤（一）
1：安装nodejs
2：替换源：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3：安装webpack-cli
4：全局安装webpack和webpack-cli，webpack4这两个是分开的。因为换成了淘宝的源，就可以用淘宝的cnpm。
cnpm install webpack -g cnpm install webpack-cli -g
安装成功
5：新建项目
建立一个项目目录，我这里在F:\www\goods，进入到这个目录
然后初始化
cnpm init
一路回车即可
这时候goods目录下就生成一个 package.json 文件
6：为了更好的项目管理，我们在项目目录里面安装一份独立的Webpack，在项目目录，这里是F:\www\goods，执行
cnpm install --save-dev webpack
执行成功后，会生成一个node_modules目录，这就是webpack模块
同时package.json文件也会改变，这是新增加的
7：安装css-loader和style-loader
cnpm install style-loader css-loader --save-dev
执行后package.json又发生了变法，增加了这两个东西。
css-loader和style-loader是啥：css-loader使你能够使用类似@import和url（...）的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包，也就是这个东西能够打包css。
7：开始打包
（1）：自定义手动打包
准备工作：
建立几个文件：
index.html；main.js；hello.js；syle.css
index.html
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webpack</title> </head> <body> <p>webpack</p> </body> </html>main.js
require('./hello.js'); //我们要打包这个js文件
// webpack只加载js文件，需要使用css-loader用来使webpack可处理css文件
//style-loader用来将css的style转换为<style>标签中的样式，插入到HTML文件中。
require('style-loader!css-loader!./style.css'); hello.jsfunction world() {
return {
text: 'Hello World!'
};
}
var text = world().text;
document.write(text);style.csshtml body {
margin: 0;
bottom: 0;
background:#FF0000;
} （1）打包，退后开始装逼了。
3系列版本用 webpack main.js hello.bundle.js –watch 打包，高版本，4系列用下面打包
webpack main.js --output-filename hello.bundle.js --mode development
打包成功，看一下目录
执行成功后，生成了一个dist目录，并且把打包文件hello.bundle.js写入到了该目录，当然也可以指定打包的特点目录。
最后我们把hello.bundle.js加入到index.html里面
打开浏览器看一下
引入成功，这就是一个基本的打包，把js和css打包成了一个文件，应用这一个文件就OK了，这就是所谓的模块化。
--mode development 开发模式
--mode production 生产模式
--output-filename 输出文件
--output-path 输出路径 不加这个默认dist
