01 webpack 基础配置

webpack 4.3x
4.x以后打包和名款
1.快速初始化项目 cnpm init -y

  1. 在项目根目录创建src 源代码目录 和 dist产品目录
    3.在src目录下创建 index.html
    4.使用 cnpm 安装 webpack ,运行 cnpm i webpack webpack-cli -D
    全局运行 npm i cnpm -g

5.注意 webpack4 x 提供了 约定大于配置的概念,目的是为了建设配置文件的体积。
-- 默认约定了:
-- 打包入口是 src -> index.js
--出口文件是 dist - > main.js
-- 4.x 中新增了 mode 选项 这是必须项 可选值为:development / production

//webpack-dev-server 打包好后会在根目录下生成一个打包好的 main.js保存在内存中。所以 在 目录里面看不见

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open Safari --port 3000 --hot --host 127.0.0.1"
// webpack-dev-server 启动服务器
// --open 默认打开 chrome --open Safari 指定Safari
----port 3000 端口3000
-hot 热更新
--host 127.0.0.1 指定域名
},

cnpm i html-webpack-plugin -D
把 index.html在内存中使用

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 更新:Webpack4已经发布,本篇是基于Webpack3的,请注意。更正:1.package.json中使用了应...
    HermitCarb阅读 1,247评论 2 4
  • Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx ....
    折枝赠远方阅读 407评论 0 0
  • 前言 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,...
    BetterChen阅读 1,974评论 0 3
  • 1、webpack入门 Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模...
    余生安好178阅读 1,122评论 0 2
  • --- title: webpack-base-study date: 2019-06-27 15:56:22 t...
    Vue_1c5e阅读 187评论 0 0