1、webpack环境搭建

webpack概述

文档部分翻译内容来自：https://github.com/webpack-china/webpack.js.org

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

在开始前你需要先理解一些核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)

环境搭建：

在磁盘建立文件夹，如：01文件夹

• 1、安装webpack(尽量不要全局安装以免版本不对或者冲突)，截至写作webpack版本为webpack 4
  • 1-1、需要安装webpack 和 webpack-cli
  • 1-2、到项目目录(cd 01/)执行 yarn init -y
  • 1-3、yarn add webpack webpack-cli -D
• 2、手动配置webpack
  • 2.1、项目根目录创建：webpack.config.js 文件
  • 2.2、项目根目录创建src文件夹，创建index.js (src/index.js)
  • 2.3、在package.json中创建scripts脚本命令

   "scripts": {
     "build": "webpack --config webpack.config.js"
    },
  

• 3、 src/index.js 内容：

 console.log('hello webpack 4.X');

• 4、 webpack.config.js 内容：

//  webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// webpack相关配置
module.exports = {
    // 模式，2种：生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码，生产模式压缩打包后代码
    mode: 'development',
    // 入口,表示从哪里开始打包
    entry: './src/index.js',   
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名
        filename: 'bundle.js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, 'dist')
    }
}

根目录执行 npm run build 或者 cnpm run build 生成打包后代码

如何要运行打包后代码：
1、可在dist目录创建index.html引入对应js，在浏览器中预览
2、vscode中打开bundle.js，右键：Run Code在node环境中预览
3、安装静态资源服务器：webpack-dev-server，移步至