Webpack之知识初探索，搭建一个简单的webpack开发环境

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

对前端来说，webpack的理解就是：webpack是从入口文件开始，经过模块依赖加载/分析/打包三个流程完成项目构建。

相对对比grunt，gulp等构建工具的打包思路则是：遍历源文件 匹配规则 打包。这个流程种做不到按需加载。

如何使用：

1. 新建文件夹npm init 初始化文件。

2. 安装webpack

npm install webpack webpack-cli --save-dev

3.在当前文件夹内新建webpack.dev.config.js文件。

module.exports = {
    entry: './src/index.js', // 主文件地址
    output: {
        path: __dirname, // 当前路径
        filename: './release/bundle.js' // 输出地址
    }

4. 修改package.js

 "scripts": {
        "dev": "webpack --config ./webpack.dev.config.js --mode development",
    },

5. 安装其他依赖

npm install webpack-dev-server html-webpack-plugin --save-dev

6. webpack 配置

const path = require("path")
const HtmlwebpackPlugin = require("html-webpack-plugin")
 
plugins:[
    new HtmlWebpackPlugin({
        template: './index.html'
    })
    
],
    // 设定运行根目录
    devServer:{
        contentBase:path.join(_dirname,'./release'),
            open:true, // 自动打开游览器 
                prot:9000  监听9000端口
    }

7. 修改启动命令
 

 "scripts": {
        "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development",
    },

8. 安装编译打包插件

yarn add babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

 "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-latest": "^6.24.1",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.8.3",
        "webpack-cli": "^3.1.1",
        "webpack-dev-server": "^3.1.4"
    }

9. 配置es6 转换插件

module: {
        rules: [{ // 检测es6转化为es5
            test: /\.js?$/,
            exclude: /(node_modules)/, // 忽略
            loader: 'babel-loader' // 使用babel-loader 
        }]
    }

10. 主目录下增加.babelrc文件 配置babel配置

{
    "presets": [
        "es2015",
        "latest"
    ],
    "plugins": []
}