边学边写webpack4 --基础部分

以下内容参考借鉴此文https://www.jianshu.com/p/b7f3cbfa7287

1. 安装node环境 -- 下载地址 http://nodejs.cn/download/

2. 在项目目录下输入npm init初始化一个node项目（先执行下面步骤，cnpm init代替npm init命令）
   为了做接下来的事情舒服一点，请先执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 一路回车完成cnpm init，此时项目根目录生成了最基础的 package.json 文件

4. cnpm安装webpack和webpack-cli，cnpm install webpack --save-dev，cnpm install webpack-cli --save-dev
   --save 会写入package.json 的 dependencies(运行依赖)
   --save-dev 会写入package.json 的 devDependencies(开发依赖) 如babel，loader等模块

5. src目录下创建index.js，内容为

function test(){
    console.log('test')
}
test()

6. 根目录（不是必须这个位置）创建一个webpack.config.js, 以下是一个最基础的demo

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'dist');//__dirname当前文件路径的绝对路径
//path.resolve是node.js语法路径解析(就是cmd里的cd),区分语法:连接路径：path.join
var config = {
    entry: {
        index: './src/index.js' //入口文件
    },
    output: {
        filename: 'bundle.js', //编译后的文件名
        path: buildPath //编译后的文件路径
    }
};
module.exports = config; //输出模块一定是个对象

7. webpack.json的scripts中新增以下内容,执行npm run dev 和 npm run build，然后就会生成dist目录下的bundle.js，区别是后者被压缩，此时index.html已经可以执行

"dev": "webpack --mode development",
"build": "webpack --mode production"

以上只完成了对入口index.js文件进行了编译，生成了编译后的bundle.js

---

接下来要安装html打包的插件 HtmlWebpackPlugin

8. 执行cnpm install html-webpack-plugin --save-dev
   9.修改webpack.config.js文件，增加

var HtmlWebpackPlugin = require('html-webpack-plugin');
//以下为config里的配置
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
                template: './src/index.html'
    })
]

10.执行npm run dev ，再运行打包后的dist/index.html，控制台输出了test；

---

安装简单的web服务器，并添加热加载 webpack-dev-server

11. 执行cnpm install webpack-dev-server --save-dev
12. 修改webpack.config.js,

devServer: {
    contentBase:'./dist',
    hot: true
},

13.修改webpack.json

"dev": "webpack-dev-server --mode development --open --hot",

14. 执行npm run dev

出现奇怪报错现象请删除node_modules目录，重新执行cnpm install，可能是哪个包没下载全

---

到这里我已经运行成功一个webpack打包的最简单demo

接下来再写一点加载器，前往查看最简单的例子，边学边写webpack4 -- 各种加载器loader