webpack初体验

前提： 确保有node跟webpack

1.创建一个文件（webpack-demo），cmd进入控制台，使用指令npm init 会在项目中生成一个package.json文件。

2.在项目中安装webpack，在cmd中执行npm install --save-dev webpack。

这时候项目的初始化就完成，开始第一个demo。

在根目录先创建一个app文件夹一个public文件夹。在app文件夹内创建main.js以及Greeter.js，在public文件夹内创建index.html。

 

webpack简单打包指令：webpack { 打包文件 } -o { 文件位置 }。

在cmd执行 webpack app/main.js -o public/bundle.js 

执行成功会在public文件夹中生成一个bundle.js文件。

通过配置文件使用webpack：

在跟目录创建webpack.config.js文件。

 这时候只需要在cmd中执行webpack命令。这条命令会自动引用webpack.config.js文件中的配置项。

更快捷的方式：配置我们一开始创建的package.json文件。npm可以引导任务执行，对npm进行配置后就可以更简单的使用。

在scripts中添加"start": "webpack"。

配置成功后在cmd中执行npm start 即可成功。

webpack功能：

source Maps（只应该在开发阶段使用）

 使用webpack构建本地服务器：

 

在package.json中的scripts对象中添加如下命令：

 执行npm run server即可在本地8080端口查看结果。

loaders:

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。比如scss转换为css。

loaders需要单独安装并且需要在webpack.config.js中的module关键字下进行配置。

配置项：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

loader： loader的名称（必须）

include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）

query：为loaders提供额外的设置选项（可选）

 使用Babel:

Babel是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其他不同的包整合在一起使用，对于每一个你需要的功能或拓展你都需要安装单独的包（解析es6的babel-env-preset，解析jsx的babel-prest-react比较用常用）

先安装babel需要的一些依赖包： babel-core babel-loader babel-preset-env babel-preset-react

在安装babel-loader时要注意版本。

 安装完成后在webpack.config.js中配置babel。

 现在demo已经已经可以使用es6以及react。

尝试去将项目改写成react：

先安装react以及react-dom。

在app文件下创建一个config.json文件。

 改写Greeter.js文件以及main文件

 执行npm run server 就可以在8080端口查看到结果了。

优化webpack.config.js的配置。

babe具有非常多的配置项，可以将babel的配置放到一个名为.babelrc的文件中。

 

css：

webpack提供了两个工具处理样式表，css-loader和style-loader。css-loader使代码可以使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式加入页面，二者结合可以使样式表嵌入到webpack打包后的js文件中。

安装css-loader以及style-loader

 在app文件夹下创建一个名字为main.cssd的文件

 再在main.js文件中使用import引入

 css-module:（避免css全局污染）

ps： 使用loaclIdentName报错  没有loaclIdentName属性。

app文件夹下创建一个Greeter.css文件

 导入.root到Greeter.js文件中

 npm run server 后可以在8080端口查看结果

插件（Plugins）：

plugins是用来拓展webpack的功能的，会在整个构建过程中生效，执行相关任务。loaders是在打包构建过程中处理源文件的（jsx，scss，less）一次次处理一个，插件并不直接操作单个文件，它对整个构建过程起作用。

html-webpack-plugin:

先对HtmlWebpackPlugin插件进行安装：npm install --save-dev html-webpack-plugin。

移出public文件夹，利用此插件，index.html文件会自动生成，此外css已经通过前面的操作打包到js中了。

在app目录下创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中插件会依据此模板生成最终html页面，会自动依赖js，css等文件。

index.tmpl.html代码如下：

修改webpack.config,js文件，并新建一个build文件夹用来存放最终输出文件

 

 再次执行npm start进行打包时会发现build文件夹下生成了bundle.js以及index.html

转自https://www.jianshu.com/p/42e11515c10f，自己跟着做了一边，使用的webpack版本为4.40.2有些指令已经改变了，自己写下来用于记录。