webpack、sass、react、redux的简易demo入门
最开始只是想综合的初略学习下这几种技术,所以萌生了搭建一个简单的结构的想法;整个结构应该没有什么问题;已经放到了 webpack本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 我自己对
入口(entry)起点或是应用程序的起点入口。从这个起点开始,应用程序启动执行。如果传递一个数组,那么数组的每一项都会执行。
entry: { home: './src/scripts/pages/home/index.js' // homecss: './src/styles/pages/home.scss' // scss入口放到最开始的js中,webpack无法处理非js文件 }, 输出(output)output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。 通常而言,通过 output.filename 和 output.path 属性,来告诉 webpack bundle 的名称,以及我们想要生成(emit)到哪里。 output: { path: path.join(__dirname + '/src/dist'),// publicPath:'/' // publicPath: path.join(__dirname + '/src/dist/'),// 加载外部资源,此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」 filename: 'js/[name].js' } 需要注意的是, loaderloader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图可以直接引用的模块。 重要的是要记得,在 webpack 配置中定义 loader 时,要定义在 module.rules 中,而不是 rules。 module: { rules: [ { test: /.js$/,exclude: /(node_modules|bower_components)/,use: { loader: 'babel-loader',options: { presets: ['@babel/preset-env','@babel/stage-3','@babel/react'] } } },{ test: /.scss$/,use: extractSass.extract({ use: [{ loader: "css-loader" },{ loader: "sass-loader" }],// publicPath: './../',// 加载外部资源,把路径重新定义到dist目录下,而不是css里面 // use style-loader in development fallback: "style-loader" }) },{ test: /.(png|svg|jpg|gif|jpeg)$/,use: [ { loader: 'file-loader',options: { name: '[name].[ext]',useRelativePath: true,// 图片相对路径 outputPath: 'images/' } } ] } ] } 以上是
可以看到,同一个文件可以顺序使用多个 插件(plugins)插件是 wepback 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!插件目的在于解决 loader 无法实现的其他事。 由于插件可以携带参数/选项,你必须在
解析(Resolve)这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看模块解析方式。 简单的说,就是会帮我们弄好一些默认的选项,比如别名 resolve: { mainFiles: ["index"],extensions: ['.js','.jsx'],alias: { 'stylepages': path.join(__dirname + '/src/styles/pages'),'scripts': path.join(__dirname + '/src/scripts/pages'),'commonjs': path.join(__dirname + '/src/scripts/common') } } 遇到问题关于webpack无法把css文件作为入口,需要在js中引入css,然后进行css的分离 关于sass使用@import时来使用alias别名配置的路径时不被正确解析,sass-loader需要在使用别名的前面加上 关于
{ test: /.(png|svg|jpg|gif|jpeg)$/,use: [ { loader: 'file-loader',options: { name: '[name].[ext]',// 图片相对路径 outputPath: 'images/' } } ] }
const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractSass = new ExtractTextPlugin({ filename: "css/[name].css",disable: process.env.NODE_ENV === "development" }); // loader 里面 { test: /.scss$/,use: extractSass.extract({ use: [{ loader: "css-loader" },{ loader: "sass-loader" }],publicPath: './../',// 把路径重新定义到dist目录下,而不是css里面 // use style-loader in development fallback: "style-loader" }) }
output: { path: path.join(__dirname + '/src/dist'),publicPath:'./' // publicPath: path.join(__dirname + '/src/dist/'),// 加载外部资源,此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」 filename: 'js/[name].js' } sassSass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。 使用sass可以感受到以下几点的优势:
这里就不多说sass的学习了,可以查看sass中文、sass官网 reactReact 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。
更多的学习react学习官网 reduxRedux 是 JavaScript 状态容器,提供可预测化的状态管理。应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action,一个描述发生什么的对象。 为了描述 action 如何改变 state 树,你需要编写 reducers;
具体实践中:
import { createStore } from 'redux'; /** * 这是一个 reducer,形式为 (state,action) => state 的纯函数。 * 描述了 action 如何把 state 转变成下一个 state。 * * state 的形式取决于你,可以是基本类型、数组、对象、 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是 * 当 state 变化时需要返回全新的对象,而不是修改传入的参数。 * * 下面例子使用 `switch` 语句和字符串来做判断,但你可以写帮助类(helper) * 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。 */ function counter(state = 0,action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } // 创建 Redux store 来存放应用的状态。 // API 是 { subscribe,dispatch,getState }。 let store = createStore(counter); // 可以手动订阅更新,也可以事件绑定到视图层。 store.subscribe(() => console.log(store.getState()) ); // 改变内部 state 惟一方法是 dispatch 一个 action。 // action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行 store.dispatch({ type: 'INCREMENT' }); // 1 store.dispatch({ type: 'INCREMENT' }); // 2 store.dispatch({ type: 'DECREMENT' }); // 1 异步redux像 redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法,以此来让你 dispatch 一些除了 action 以外的其他内容,例如:函数或者 Promise。 redux-reactRedux 官方提供的 React 绑定库。 具有高效且灵活的特性。 结合react来完善了下redux的使用,不需要我们每次都使用 <Provider store> 可以在最顶层将store传递至每个需要store的子组件 connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options]) 可以将一些state映射到某个组件,来驱动组件渲染 总结react-redux-demo需要webpack3以上 运行方式: `npm install` 安装相关依赖 `webpack` 执行webpack来进行打包 在浏览器中打开目录下的 ? react-redux-demo git:(master) tree -I node_modules . ├── html │ └── pages │ └── home.html ├── package-lock.json ├── package.json ├── readMe.md ├── src │ ├── dist │ │ ├── css │ │ │ └── home.css │ │ ├── images │ │ │ └── head.jpeg │ │ └── js │ │ └── home.js │ ├── scripts │ │ ├── common │ │ └── pages │ │ └── home │ │ ├── actions │ │ │ ├── data.js │ │ │ └── index.js │ │ ├── components │ │ │ ├── app.js │ │ │ ├── article │ │ │ │ └── index.js │ │ │ └── consults │ │ │ └── index.js │ │ ├── index.js │ │ ├── reducers │ │ │ ├── data.js │ │ │ └── index.js │ │ └── store │ │ └── index.js │ └── styles │ ├── images │ │ └── home │ │ └── head.jpeg │ ├── lib │ │ └── base.scss │ ├── module │ └── pages │ └── home.scss └── webpack.config.js (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |