webpack4.x开发一个react脚手架 yxl 2019-01-17 14:36:15 51文章目录 #### ##### 什么是WebPack,为什么要使用它? ##### 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 1. 模块化,让我们可以把复杂的程序细化为小的文件; 2. 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别; 3. Scss,less等CSS预处理器 webpack的出现恰好解决了这些繁琐的问题。 **那么问题了,不是有了gulp,grunt这些工具了吗?为什么还需要webpack?** 其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。 Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。 Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。 刚开始接触webpack的人觉得配置这个东西觉得深奥,其实不是很难,跟着webpack文档,先阅读概念,接下来一步一步手动敲代码,对没错,自己要动手,要不永远不会。 #### 开始工作 我们先把目录结构搞出来, config //webpack配置目录 webpack.config.base.js //webpack 的基础配置 webpack.config.dev.js //开发环境的配置 webpack.config.pro.js //生产环境的配置 dist //构建目录,不用手动建立 public //静态文件目录, index.html scripts start.js //开发环境运行的配置 build.js //打包运行的配置 src //主要的开发环境 assets //静态资源文件 App.js //app index.js //入口文件 index.module.scss //scss 模块 css-module index.css //普通的css index.scss //scss .babelrc //webpack会自动调用.babelrc里的babel配置选项 package.json //依赖包 webpack.config.base.js 引入必须的配置 const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); html-webpack-plugin 插件的基本作用就是生成html文件,详细介绍看[npm](https://www.npmjs.com/package/html-webpack-plugin "npm") 到了常见的webpack配置了,继续增加以下代码 const PROJECT_ROOT = path.join(__dirname, '../'); const SRC = path.join(PROJECT_ROOT, '/', 'src'); const PUBLIC = path.join(PROJECT_ROOT, '/', 'public'); const DIST = path.join(PROJECT_ROOT, '/', 'dist'); module.exports = { entry: SRC,//常说的入口文件 output:{ //输出文件 path:DIST,//输出的目录, filename:"bundle-[hash].js" //输出的文件名 }, } 到了webpack的重要的module模块了,其中Loaders更是重点 ```javascript Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件。 Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置,Loaders的配置包括以下几方面: 1. test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须) 2. loader:loader的名称(必须) 3. include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选); 4. query:为loaders提供额外的设置选项(可选) ``` 继续添加以下代码:当然你需要安装对相应的loader npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react npm install --save-dev url-loader file-loader 安装这些模块可能有兼容性问题,[上一篇文章](https://ah.yxlblog.com/index/article/150.html "上一篇文章")有介绍 module:{ rules:[ { test:/(\.js|\.jsx)$/, //这个是配置jsx语法的 include: SRC, use:{ loader: "babel-loader" }, exclude:/node_modules/ }, { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],//配置图片格式 use:{ loader: require.resolve('url-loader'), options: { limit: 10000, name: 'assets/media/[name].[hash:8].[ext]', }, } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: ('assets/fonts/[name].[hash:7].[ext]') } }, ] }, 到目前,我们先要测试下能否跑起来,所以继续吧dev的配置配以下,需要用到webpack-dev-server、webpack-merge webpack.config.dev.js const webpackConfigDev = { devtool: 'cheap-module-eval-source-map', mode:'development', devServer: { //devServer 的配置 contentBase: SRC, hot: true, inline: true, disableHostCheck: true, historyApiFallback: true, stats: 'minimal', clientLogLevel: 'warning', }, } module.exports = merge(webpackConfigBase, webpackConfigDev); 回到scripts/start.js,配置开发环境启动文件,常见的webpack-dev-server的配置 const path = require('path'); const webpack = require('webpack'); const webpackDevServer = require('webpack-dev-server'); const webpackConfig = require('../config/webpack.config.dev'); const options = { hot: true, host: '0.0.0.0' }; webpackDevServer.addDevServerEntrypoints(webpackConfig, options); const compiler = webpack(webpackConfig); const devServerOptions = Object.assign({}, webpackConfig.devServer, { stats: { colors: true, }, }); const server = new webpackDevServer(compiler, devServerOptions); server.listen(5000, '0.0.0.0', () => { console.log('Starting server on http://localhost:5000'); }); 最后在package.json 文件中配置 scripts "scripts": { "start": "node ./scripts/start.js", "build": "node ./scripts/build.js" }, 没错这样配置后就能命令行通过 npm start 打开浏览器 http://localhost:5000 , 当然那样配置还是会报错,而且不会自动更新,我们回到config/webpack.config.base.js,添加以下代码 plugins:[ new HtmlWebpackPlugin({ template: PUBLIC + "/index.html", inlineSource: 'runtime~.+\\.js', }), new webpack.HotModuleReplacementPlugin() ], 最后还有css scss modul.scss 的配置项 回到webpack.config.dev.js npm install --save-dev css-loader style-loader sass-loader node-sass 这里我加入了rem的适配 const getStyleLoaders = (cssOptions, preProcessor,cssModules) => { const loaders = [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: cssOptions, }, { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), px2rem({remUnit:75,exclude: /node_modules/i}) ], }, }, ]; if (preProcessor) { loaders.push(require.resolve(preProcessor)); } if (cssModules) { loaders.push(cssModules); } return loaders; }; 注意的是。module.scss 和scss的配置,scss配置需要配出module.scss 要不报错 ` module:{ rules:[ { test: /\.css$/, use: getStyleLoaders() }, { test: sassRegex, exclude: sassModuleRegex,//这个需要exclude sassmodule的要不编译错误 use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader') }, { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, localIdentName: '[local]___[hash:base64:5]', getLocalIdent: getCSSModuleLocalIdent, }, 'sass-loader') } ], },` emmmm,说好的是react,当然少不了react react-dom 这两货 npm install --save-dev react react-dom 回到src的App.js,键入以下代码 import React,{ Component } from 'react'; import styles from './index.module.scss'; class App extends Component{ render(){ return( <div className={ styles.wrapper }> <h1 className={ styles.title }> react-cli </h1> </div> ); } } export default App; 这个不用说了,常见的react代码 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render(<App />,document.querySelector('#root')); 到了这步,执行npm start,应该可以跑起来了。 详细配置看[github](https://github.com/yxl720/webpack4-react-cli "github")Tags: webpack react您觉得不错,可以分享到:关于本站凡本站注明"本站"或"投稿"的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。关于作者__construct幸福不会遗漏为之付出的人 上一篇文章webpack报错/babel报错的解决方法下一篇文章 js的跨域、存储和浏览器缓存相关文章webpack报错/babel报错的解决方法react应用中怎样可以在redux进行跳转react简单版博客