webpack初体验
1、全局安装webpack，安装命令：npm install -g webpack
2、新建文件夹demo，初始化webpack：npm init ，会生成package.json文件，表示初始化成功
3、在项目中安装webpack依赖包，安装命令：npm install --save-dev webpack，
4、创建2个文件夹：app和build，创建两个js放在app中，build中创建index.html
5、在项目根目录创建webpack.config.js，放入基本的webpack配置信息
webpack.config.js基本配置信息
6、在package.json中配置，使其可以用npm start进行项目编译打包。(第一次使用npm start时会提示安装webpack-cli，可以跟着来，或者自己手动安装，安装命令：npm install --save-dev webpack-cli)
package.json基本配置信息
7、生成Source Maps，使得调试更容易，在webpack.config.js中添加“devtool:'eval-source-map',”
Source Maps的配置需要使用到“devtool”，中小型项目一般使用：eval-source-map
devtool配置选项
8、使用webpack构建本地服务器，（使用npm run server）需要将命令信息添加到webpack的配置文件中，即webpack.config.js中
webpack.config.js基本配置信息
然后在package.json中添加开启服务信息："server":"webpack-dev-server --open"。
package.json基本信息
9、Loaders的使用，loaders可以使webpack可以加载外部的配置信息或工具，loaders的配置主要是放在webpack.config.js的modules中配置
loaders的基本配置
10、Babel：编译JavaScript的平台，可以将TypeScript或者jsx转换为js，Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，使用最多的是es6解析文件。（babel-preset-env）。安装命令：npm install --save-dev babel-core babel-loader@7 babel-preset-env babel-preset-react。在webpack配置中做如下配置
webpack.config.js配置
11、ok，目前已经可以解析es6语法以及jsx的语法了，下面进行react和react-dom的安装，安装命令：npm install --save react react-dom
npm语句错误
截至目前为止，已经基本可以用于react开发，对于webpack来说：一切皆模块。
12、加载css的处理模块，webpack提供两个工具处理样式表，css-loader和style-loader，
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。安装命令：npm install --save-dev style-loader css-loader。
同一个文件引入loader的方法
13、css预处理器：以postcss-loader 和 autoprefixer为例，安装命令：npm install --save-dev postcss-loader autoprefixer。然后在webpack中添加postcss-loader。
新建postcss.config.js
postcss.config.js
14、基本的插件安装
首先使用webpack的内置插件，以版权声明的插件为例，首先在webpack的配置文件中声明：“const webpack =require('webpack');”，其次在与module同级之下建立plugins的数组
plugins配置
执行效果图
15、HtmlWebpackPlugin插件
可以帮我们创建index.html，只需要提供index.tmpl.html模板，安装命令：npm install --save-dev html-webpack-plugin。
index.tmpl.html基本模板信息
配置时，同样需要在webpack的配置文件中定义：“cons tHtmlWebpackPlugin =require('html-webpack-plugin');”底部的plugins如图
webpack插件配置
网友评论