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

1、建立项目

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

mkdir webpackDemo

切换

cd webpackDemo

2、初始化NPM

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

npm init -y

3、安装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版本才有的

4、调整webpack.json

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

5、运行项目

如今初始的配置基本完成，如今在项目根目录下建立一个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，就会自动压缩

6、正常配置

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

mkdir src

7、webpack配置文件

到这一步，咱们建立一个webpack的配置文件：webapck.config.js，在文件的根目录，配置文件的基本内容大体以下：

8、运行配置文件

如今咱们能够经过运行配置文件来生成dist

npx webpack --config webpack.config.js

运行成功

9、配置npm scripts

每次运行项目，都输入这么一大堆东西，太麻烦，因此咱们能够在package.json文件里面配置npm命令

配置好以后，咱们如今就能够经过运行npm run build命令来运行项目
其实上面的命令配置完整一些好
补充这里有一步省略了，那就是配置完config后，须要导出去，否则没有效果的

module.exports = config

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

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