初识webpack
什么是webpack?官网介绍是 module bundler, JavaScript 的模块打包器，大概意思就是，能够将一堆关系错综复杂的 .js, .css, .sass 等文件，打包成几个静态的文件，在 html 里面直接插入实用，webpack中包含了gulp自动打包工具、包含了babel转es5压缩等.
npm 相关命令了解
初始化新项目
npm init
全局安装依赖包package，不属于具体哪个项目
npm install --global package
安装运行时依赖包PACKAGE，会打包至最终生成文件
npm install --save package
安装开发时依赖包package，不会出现在生产文件中(正式运营环境)。webpack就属于开发时用来打包文件，在运行时就不需要它了。
npm install --save-dev package
执行命令，具体命令配置在package.json中
npm run command
同时以上安装依赖命令也有简写模式
npm i -g package
npm i -S package
npm i -D package
安装webpack
首先要安装node.js,node.js自带了软件包管理器npm,webpack需要node.js v0.6以上的支持,建议使用最新版node.js,全局安装webpack
$ npm install webpack -g #全局安装webpack
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
$ mkdir demo # 创建一个demo目录
$ cd demo
$ npm init # 初始化一个项目，生成package.json
# 安装webpack与webpack-cli
$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli
二、打包实现
mkdir src # 创建src目录
在src/index.html中写入：
<html>
<head>
<meta charset = 'utf-8'>
</head>
<body>
<script src="../dist/bundle.js>
</body>
</html>
在main.js中写入：
// main.js
document.write('It works for main.js')
在package.json中配置scripts【dist文件夹和bundle.js会自动生成】：
"scripts": {
"build": "webpack ./src/main.js -o ./dist/bundle.js --mode development"
},
最后在终端中使用如下命令：
npm run build # 使用webpack进行打包了
webpack.config.js配置
// 这是webpack的配置文件，当 npm run build 会自动找webpack.config.js
// 这个配置未见时运行在node环境下的，这个配置文件书写方法是node.js语法
const path = require("path");
module.exports = {
//入口文件
entry: path.join(__dirname, "./src/main.js"),
//出口
output: {
//配置出口文件得目录
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
mode: "development",
}
出处:https://www.blog8090.com/webpackkuai-su-shang-shou/
1675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
