webpack安装以及一些配置

 

 

 

 

在用webpack以前... 或说没有实现组件化以前的web1.0时代!

 

 

 

 

最终迈向web2..0以后的时代!

===============华丽的分割线==================

 

安装步骤有两步:

 

1. 首先安装  全局

npm install -g webpack

2. 再安装局部

npm install --save-dev webpack

为了控制版本不一的状况，实际状况就是这样.

 

安装好了就是这样(全局安装即每一个目录均可以获得你安装的信息)

 

好了下一步操做!

==错了。

要先

npm init

生成一系列信息！

本地安装： npm install package-name

全局全装： npm install -g  package-name

 

升级：  npm update 

卸载：  npm uninstall 

 

经过package.json 

删除不须要的依赖信息：

{

"name":"myPackage",

"version":"0.0.1",

"dependencies":{

"abc":">0.0.2"}

}

好了，卸载npm包管理！

 

再次生产：npm init

一股劲的回车就行，目测！

mdzz，不行，乖乖！

 

乖乖，只有第一个名字不能为空，其他回车跳过就行！！！

 

搞定（上面的信息仅是测试，是不许备发布的）

 

个人测试目录是这样的!

在这里我不浪费vscode的目录结构而去使用Linux tree了

 

好了，填坑（代码）

index.html生产目录结构：

 

一个！产生的目录结构

 

Emment神器！

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，# {destination for bundled file}处填写打包文件的存放路径# 填写路径的时候不用添加{}

forwebpack {entry file} {destination  bundled file}

webpack app/main.js public/bundle.js

后面的打包文件能够不存在！ 执行命令后自动生成！

 

打包成功一个！

 

其实，经过loaders和plugs最好了!

下面配置文件：

 

在当前目录下：webpack

便可经过配置文件生成：

 

更快捷的执行打包任务

 

注：package.json中的script会安装必定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，因此不管是全局仍是局部安装的Webpack，你都不须要写前面那指明详细的路径了。

 

npm的start命令是一个特殊的脚本名称，其特殊性表如今，在命令行中使用npm start就能够执行其对于的命令，若是对应的此脚本名称不是start，想要在命令行中运行时，须要这样用npm run {script name}如npm run build，咱们在命令行中输入npm start试试，输出结果以下：

 

这时候1条命令便可解决：

 npm start

 

 

 

 

咱们选择中小项目用的源码地图！

使用webpack构建本地服务器

先安装到本地：

npm install --save-dev webpack-dev-server

 

 

开启服务器两个步骤：

 

1. 配置package.json

 

2. 配置webpack.config.js(webpack.conf.js)

 

 

最后npm run server !

 

 

 

OK，自动弹出浏览器并进入！

 

Loaders

鼎鼎大名的Loaders登场了！

 

 

 

 

 

注 因为webpack3.*/webpack2.*已经内置可处理JSON文件，这里咱们无需再添加webpack1.*须要的json-loader。在看如何具体使用loader以前咱们先看看Babel是什么？

 

 

安装Babel:

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

 

再安装：

react和react-dom

npm install --save react react-dom

 

一切皆模块

Webpack有一个不可不说的优势，它把全部的文件都都当作模块处理，JavaScript代码，CSS和fonts以及图片等等经过合适的loader均可以被处理。

CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，两者处理的任务不一样，css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能,style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中。

npm install --save-dev style-loader css-loader

 

请注意这里对同一个文件引入多个loader的方法。

咱们这里例子中用到的webpack只有单一的入口，其它的模块须要经过 import, require, url等与入口文件创建其关联，为了让webpack能找到”main.css“文件，咱们把它导入”main.js “中，以下

 

CSS module

在过去的一些年里，JavaScript经过一些新的语言特性，更好的工具以及更好的实践方法（好比说模块化）发展得很是迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理能够自动完成。

不过前端的另一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都很是困难。

最近有一个叫作 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所须要作的一切就是把”modules“传递到所须要的地方，而后就能够直接把CSS的类名传递到组件的代码中，且这样作只对当前组件有效，没必要担忧在不一样的模块中使用相同的类名形成冲突。具体的代码以下