Web前端之路1024webpack学习

1、webpack环境搭建

2019-07-25  本文已影响3人  圆梦人生

webpack概述

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

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

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

环境搭建:

在磁盘建立文件夹,如:01文件夹

 console.log('hello webpack 4.X');
//  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,移步至

上一篇下一篇

猜你喜欢

热点阅读