webpack配置

webpack配置-基础笔记

1.首先创建一个js文件，webpack.config.js //这个名字不能随便改

path是从path包里面找

2.paht包
在更新一个路径时注意最好先初始化npm init
然后就开始配置，起一个包的名字，重新起一个（不能起webpack）
现在写的没有用上。
就会生成一个json文件
然后将入口和出口配置到一个文件夹中（就是webpack.config.js）

但是一般开发中不会直接在终端输入webpack，此时就需要：

映射webpack和 npm run build

（1）打开package.json 里面有一个scripts 下面有一个test
（2）在test下面新建一个"build":"webpack"
（3）这样当执行npm run build 时就会去这个json文件中找这个build
直接运行webpack会优先在本地中找

终端处运行：

安装本地webpack在终端输入： npm install webpack@3.6.0 --save-dev （要和项目保持同步）
下面展示是开发时的依赖，（webpack用处是将项目打包，运行时就不用了，需要运行时依赖 ）
下面图片是自动生成

只要在终端输入webpack就是全局的，如果在build写个脚本，去run这个脚本，就会先找本地的webpack，如果本地没有再找全局的。

loader

有时需要将es6转换成es5代码，等功能，需要webpack扩展对应的loader。
loader使用过程：
（1）通过npm安装需要使用的loader。
（2）在webpack.config.js中的module关键字下进行配置。
把css文件也打包到dist里面的bundle.js中
去webpack官网中找loaders–样式 css-loader
先安装loader：npm install --save-dev-css-loader
再配置，在webpack.config.js中配置（module的部分）：

最后 进行打包：npm run build
css-loader负责css加载，不负责解析，还需要下载style-loader
注意：1.css-loader只负责css加载，不负责解析
2.style-loader 负责将样式添加到dom中
3.使用多个loader时，是从右向左的
webpack.config.js文件中修改。

！！！！一定要安装css-loader和style-loader，版本不对的话会报错，npm install --save-dev css-loader@0.28.11 npm install --save-dev style-loader@0.15.0 安装这两个版本