webpack基本打包配置流程

项目搭建以及webpack打包配置流程

创建文件夹EC（文件夹和文件名根据需求自定义）
在EC文件夹下新建文件夹APP
在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件
在APP文件夹下新建两个js文件：a,js b.js （当项目级别如react项目，可以根据需求创建components文件夹等等，用于更好地管理模块化项目）

APP/index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<script src="./index.js" ></script>
</body>
</html>

APP/ index.js （ES6 语法）

import a from './a.js';
import b from './b.js';
a();
b();

APP/a.js （ES6 语法）

export default function a() {console.log('module a');
}

APP/ b.js （ES6 语法）

export default function b() {console.log('module b');
}

此时在浏览器中运行APP/index.html 控制台报错

原因是浏览器并不支持ES6的模块化语法

因此用到webpack，接上面第4步骤：

在EC下新建webpack.config.js 文件（webpack是使用npm运行的，并且用npm运行webpack时，默认是运行webpack.config.js 文件）
1. webpack 用commonjs模块化语法，也就是npm语法，不用ES6语法，原因是webpack是用npm运行的。

const path = require('path');module.exports = {entry: './APP/index.js',                     //定义（告诉webpack）入口文件
    output: {path: path.resolve(__dirname, './dist'), //定义输出文件将存放的文件夹名称，这里需要绝对路径，因此开头引入path,利用path方法filename: '[name].js'                    //输出文件名称定义，这样写默认是main.js//    filename: 'index.js' //也可以定为index.js
    }
}

正式在项目中（EC文件夹下）安装webpack（前提是nodejs已经安装完毕，并且版本较新）
1. npm init -y （-y表示yes默认安装，此时项目中会自动创建package.json文件）
2. npm install --save-dev webpack （--save-dev 表示在项目中拒不安装并在开发环境Dev中安装）
3. 手动配置package.json 文件

{"name": "e_c",          //这个记得修改为和EC不同名的名称"version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"       //这是需要手动配置的webpack
  },"author": "","license": "ISC","devDependencies": {"webpack": "^3.10.0"     //这是开发依赖，在npm install --save-dev webpack 的时候自动配置的
  }
}

在EC目录下打开控制台，输入 npm run dev
2. 此时项目EC文件夹下会自动生成dist文件夹并将webpack.config.js文件中定义的入口文件输出到该dist文件夹并命名为webpack.config.js中定义的输出文件名
3. 将APP/index.html copy 一份到 dist 文件夹，用来运行该dist文件夹下由webpack打包生成的main.js（或者其他自定义的）
4. 此时在浏览器中打开dist文件夹下的index.html 控制台如下：

最终文件夹如下：

转载于:https://www.cnblogs.com/hihao/p/8032096.html

webpack基本打包配置流程相关推荐

Webpack打包-打包详细流程
Webpack Webpack是一个现代化的静态模块打包器,支持JavaScript.CSS.图片等资源的打包.它将所有模块及其依赖项视为静态资源,并创建一个依赖关系图,将这些资源转换为有效的输出文 ...
webpack 打包配置
代码示例 webpack.config.js // 引入 path 为了使用 join 方法 const path = require('path')// webpack 插件 // clean-we ...
webpack从入门到精通（四）优化打包配置总结②
1. tree shaking tree-shaking的本质是消除无用的js代码.无用代码消除广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为D ...
webpack从入门到精通（四）优化打包配置总结①
1. HMR HMR 即模块热替换(hot module replacement)的简称,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替 ...
webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
webpack打包后引用cdn的js_手摸手 Webpack 多入口配置实践
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
vue-cli+webpack打包配置
vue-cli+webpack打包配置一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
手写webpack得打包流程
目录搭建一个最基础的环境(用于测试) 本地新建一个文件夹(打包库)webpack-meself 分析webpack环境打包后的js my-pack.js文件书写手写Compiler.js 解析包, ...
webpack的一些常用打包配置
1.webpack 是什么? webpack 是一个模块化打包工具 2.模块是什么? 模块我理解就是 import xx 后面导入的文件就是一个模块它可以是js css 图片等等 3,webpac ...

webpack基本打包配置流程

webpack基本打包配置流程相关推荐

最新文章

热门文章