webpack从入门到实践

hello大家好，我是小陈，我的理念是天下没有难学的知识，今天给大家带来webpack。

众所周知我们学习一个东西首先知道它是什么？好下面进入正题

webpack是什么？

答：本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器（通俗的话讲就是打包的）

webpack 做什么事情？

答：分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的扩展语言（Scss， TypeScript等），并将其打包为合适的格式以供浏览器使用等等。。。

webpack有什么好处？

• webpack-dev-server搭建本地环境，执行热更新
• 自动处理 CSS3 属性前缀
• 预处理（Less，Sass，Es6，TypeScript）…
  不一一列举了好处太多了
  

webpack 的几个核心概念

• 入口（entry）
  -webpack执行构建的第一步从 entry 开始，可抽象成输入
• 输出 （output）
  -输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果
• loader
  -用于对模块的源代码进行转换，loader 可以使你在 import 或 “加载”模块时预处理文件。
• 插件（plugins）
  -扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或者做你想要的事情
• 模块（module）
  -在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块
• 代码块
  -一个 Chunk 有多个模块组合而成，用于代码合并与分割。Loader： 模块转化器，用于把模块原内容按照需求转换成新内容
  

好了废话不多说了，小伙伴们上车了

开始安装

你可选择全局安装 或者本地安装

yarn add webpack webpack-cli --dev (本地开发安装)

如果说小伙伴们安装上还是不能用，可以看看是否配置环境变量了

下面是重要的一步 webpack.config.js的配置

module.exports = {
    // 入口 js 文件
    entry: path.resolve(__dirname, '../src/index.js'), // 方式一 单个
    output: { // 编译输出的路径
        path: DIST_PATH,
        filename: 'index.js' //'[name].js' 多个001 chunkhash 只对修改的增加hash 适用于cdn 缓存
    },
    module: { // 模块解析
        loaders: [{ // 使用 loader需要下载 具体可以看官网的一些 API
            test: /\.js/,
            loader: 'babel-loader',
            include: SRC_PATH,
        }],
    },
    plugins: [],//插件
    devServer: { //开发服务器
        hot: true, //热更新
        contentBase: DIST_PATH, // 热更新路径
        port: 8011, // 服务端口
        host: '0.0.0.0', // Host 地址
        historyApiFallback: true,
        open: true, // 自动打开
        useLocalIp: true, // 是否在打包的时候用自己的ip
        proxy: { // 代理
            '/api': 'http://localhost:3000'
        },
        https: true
    }
}

大家可以根据自己的需要去配置

总结

大概讲到这里就结束了，只是一小部分，只是让大家入门，具体要根据自己的项目来定，各位看官们如果发现问题可以及时提出问题，我会及时更改，我是小陈后续我还会更新一系列的文档，欢迎大家。