初识webpack

为何须要构建工具

转换ES6语法 转换JSX CSS前缀补全/预处理器 压缩混淆 图片压缩

初识webpack

webpack默认配置文件：webpack.config.js

能够经过webpack --config指定其余的配置文件 好比能够在开发过程当中使用webpack --config webpack.dev.config.js
在生产环境可使用 webpck --config webpack.produce.config.js

webpack 配置组成

环境搭建 安装node.js npm /安装webpack webpack-cli

安装webpack webpack-cli

在webpack4里面 将 webpack内核和webpack-cli进行了分离，所以在实际项目使用 咱们需同时安装webpack webpack-cli 建立空目录和package.json mkdir my-project cd my-project npm init-y (-y是默认都选择yes 这时候会生成初始的package.json的文件) npm install webpack webpack-cli --save-dev(dev安装的是devDependencies里面，不会安装dependencies里面) 安装好了以后，咱们能够打印一下安装的版本看一下安装是否成功

安装完webpack,经过简单的例子感觉一下webpack的使用

webpack初体验，一个简单的例子

建立一个webpack配置文件 webpack.config.js

这个例子设定了下 entry output mode 对于entry 咱们将src/index.js做为入口文件 output咱们输出到当前文件夹下的dist目录，dist这个目录输出的文件名叫bundle.js,同时咱们指定mode值为 production也就是生产环境 webpack.config.js须要经过module.exports = {}导出个对象的 编写代码：

接下来进行打包 首先仍是找到./node_modules/.bin/webpack 能够直接运行 直接运行就是不指定webpack配置文件的名称

这时候就打包好了 而后咱们看一下打包的结果是什么样子的

这里能够看到打包出来放到dist目录，dist目录有一个bundle.js文件输出出来了 咱们能够看一下这个效果，由于目前没有Html文件的，为了看效果，咱们手动建立一个html文件 在这个html文件里面，手动的把这个打包好的脚本bundle.js引入进来

用浏览器打开一下

这个时候效果就出来了，不过你们可能经过这个例子发现，目前运行webpack打包的话多是比较麻烦的 须要./node_modules/.bin/webpack 这一串 因此咱们能够经过便捷的方式进行webpack的打包。

经过npm script运行webpack

每次咱们安装依赖(webpack )，这样依赖若是有建立命令的话，它会在./node_modules/.bin下建立一个软链接，那么咱们 package.json能够默认读到./node_modules/.bin下命令，因此能够直接在package.json指定一个scripts，里面指定webpack就能够了， 若是在scripts运行webpack,它就会去./node_modules/.bin下去寻找，

配置一下试试，

这样咱们就能够npm run build进行打包。