webpack配置相关知识详解
2017-10-03 23:43
253 查看
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。不像大多数的模块打包机,webpack是收把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件。
webpack是我们需要的模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果。
常用webpack配置
CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递到所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中使用相同的类名造成冲突。
使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。在webpack配置文件中添加postcss-loader,在根目录新建postcss.config.js,并添加如下代码之后,重新使用npm start打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。
npm install webpack webpack-dev-server --save-dev
webpack是我们需要的模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果。
常用webpack配置
const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/build", filename: "bundle-[hash].js" }, devtool: 'eval-source-map', // 本地开发服务器,这个本地服务器基于node.js构建 devServer: { contentBase: "./public", //本地服务器所加载的页面所在的目录 historyApiFallback: true, //不跳转 inline: true, // 实时刷新 hot: true // 热加载 }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, { loader: 'postcss-loader' }, { loader: 'less-loader' } ] }) }, { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, { loader: 'postcss-loader' } ] }) }, { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' }, { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]' } ] }, plugins: [ // 在引用js和css文件中加入注释 new webpack.BannerPlugin('版权所有,翻版必究'), new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数 }), // 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("style.css") ], };
CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递到所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中使用相同的类名造成冲突。
使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。在webpack配置文件中添加postcss-loader,在根目录新建postcss.config.js,并添加如下代码之后,重新使用npm start打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。
// postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] }
相关文章推荐
- 路由器相关配置详解
- Git的相关应用配置详解
- DSP28035 cpu定时器及相关配置函数详解
- hadoop配置文件详解,安装及相关操作
- OSPF相关知识与实例配置
- hadoop配置文件详解、安装及相关操作
- Spring的配置相关知识(学习spring boot的预备知识)
- Spark性能相关参数配置详解-压缩与序列化篇
- 【详解】中断相关的知识
- redhat相关的网络配置文件详解
- commons-loging 、log4j 、slf4j 、LogBack日志相关知识详解
- 大型企业网络配置系列课程详解(一)---OSPF单区域配置与相关概念的理解
- Struts2学习笔记01----初识struts2配置文件和相关基础知识
- STRUTS2.x 初始化相关的配置信息文件及struts.properties详解
- server2003-操作主机相关配置详解(附图)
- Linux自建yum仓及相关知识详解 推荐
- 配置文件ehcache.xml详解(2)— <diskStore>配置及相关
- hadoop配置文件详解,安装及相关操作
- Spark 性能相关参数配置详解-shuffle篇