webpack -- 完整入门学习笔记（一）

一、创建项目

通过命令mkdir projectName和touch fileName创建项目和生成文件
安装

mkdir webpackDemo

切换

cd webpackDemo

二、初始化NPM

这一步是初始化npm，生成一个本地的json依赖文件，运行命令后，能够在webpackDemo下面看见一个package.json文件

npm init -y

三、安装webpack

webpack 4.x以下的版本直接安装webpack，如果是webpack 4.x以上版本，因为4.x版本以上将webpack-cli分离出来了，所以还需要安装webpack-cli
安装

npm install webpack webpack-cli --save-dev

按照官网的意思，是不推荐全局安装的，建议本地安装，如果要全局安装也可以

npm install webpack webpack-cli -g

安装完成之后，我们会发现webpackDemo下面多个一个node_module和package-lock.json，其中package-lock.json是npm 5版本才有的

四、调整webpack.json

按照官方的说法执行这一步是为了确保我们的安装包是私有的，所以需要去掉main入口，新增一个private

五、运行项目

现在初始的配置基本完成，现在在项目根目录下创建一个index.js文件，在里面输入一些东西，然后运行打包文件运行，注意运行webpack命令我们会发现webpack不是内部命令
index.js

webpack命令

所以按照官方的命令来，Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出
npx webpack

我们发现运行报错了，但是即使我们不创建src文件，也依旧可以运行，只不过我们直接运行的是目标文件
npx webapck index.js

这一次运行成功，我们发现生成了dist文件，下面有一个main.js文件，我们看一下这个js文件

我们发现我们index.js的内容被打包到这个main.js里面了，至于压缩问题，这个根据官方说明，只要是使用webpack，就会自动压缩

六、正常配置

虽然上面运行了，但是还是按照官方要求，新建一个src文件，将index.js文件放入进去
创建

mkdir src

七、webpack配置文件

到这一步，我们创建一个webpack的配置文件：webapck.config.js，在文件的根目录，配置文件的基本内容大致如下：

八、运行配置文件

现在我们可以通过运行配置文件来生成dist

npx webpack --config webpack.config.js

运行成功

九、配置npm scripts

每次运行项目，都输入这么一大堆东西，太麻烦，所以我们可以在package.json文件里面配置npm命令

配置好之后，我们现在就可以通过运行npm run build命令来运行项目
其实上面的命令配置完整一些好
补充这里有一步省略了，那就是配置完config后，需要导出去，不然没有效果的

module.exports = config

"build": "webpack --config webpack.config.js"

npm run build

一切运行正常，没有报错，说明我们这个项目已经初步完成了