用webpack来构建react-antd开发环境
发布时间:2020-12-15 07:27:22 所属栏目:百科 来源:网络整理
导读:【首先 安装 nodejs】 下载zip包,解压,然后 把bin目录加入 path里面,ok 设置 仓库地址,防止被墙 npm config set registry "http://registry.npm.taobao.org" npm config list //可以查看配置 //////////////////////////////////// 【接着开始环境构建】
【首先 安装 nodejs】
下载zip包,解压,然后 把bin目录加入 path里面,ok 设置 仓库地址,防止被墙 npm config set registry "http://registry.npm.taobao.org" npm config list //可以查看配置 //////////////////////////////////// 【接着开始环境构建】 mkdir d:/antd_1/mydemo3 cd d:/antd_1/mydemo3 安装 webpack cd d:/antd_1/mydemo3 npm init //自定义创建package.json // or npm init -yes //可以创建默认的package.json // 局部 安装 webpack npm install webpack --save-dev // 安装React,--save 命令用于将包添加至 package.json 文件,执行命令: npm install react react-dom --save-dev // 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法,和es2015语法就会报错。 npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上,更重要的是我们可以在package.json文件内定义scripts,同时修改webpack的配置文件来达到自动刷新的效果。 安装webpack-dev-server执行命令: npm install webpack-dev-server --save-dev 在package.json文件中为scripts添加,方便使用命令: "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" } 这里的命令是webpack,如果需要压缩编译的话,将webpack改成webpack -p 代码编译结束: 1.根目录下执行命令 (开发时) npm run dev 2.浏览器直接访问: http://localhost:8181/index.html 3,打包 npm run build 然后 把build 目录拷贝走就好了 另外,每次修改 文件,都会实时的更新到 浏览器里面. 接着 添加antd 组件 npm install antd --save-dev 添加 其他装载器 npm install style-loader css-loader url-loader file-loader less less-loader --save-dev 添加 按需加载插件(如果不安装,下面使用会提示) npm install babel-plugin-import --save-dev // 此插件安装前,必须先安装 file-loader npm install babel-plugin-transform-runtime --save-dev 在 webpack.config.js 里面配置相应 的 loader 【备注】 还可以提取公共代码 用插件 CommonsChunkPlugin -- 待测试 还可以css单独提取出来成为一个独立的文件 用插件 extract-text-webpack-plugin ///// 下面这个链接详细讲解了 url-loader的用法和注意事项 ,特别提到 react中引用图片的打包方式 -- 待测试 webpack踩坑之路 (2)——图片的路径与打包 http://www.cnblogs.com/ghost-xyx/p/5812902.html //// css 预处理器 loader 还没试 less loader sass loader styles loader //// BannerPlugin 插件 给输出的文件头添加 注释 //// react webpack打包体积优化 -- 待测试 http://blog.csdn.net/code_for_free/article/details/51583737 //// 引入 andt 组件时,提示 要按需来加载资源, 要用 https://www.npmjs.com/package/babel-plugin-import 来 加载组件,避免文件太大 https://github.com/ant-design/babel-plugin-import 具体用法参考 具体 webpack.config.js文件有2中写法,如果 展示时没有样式,就是黄色部分造成的: 1,exclude 被过滤掉了,导致 样式不能按需加载 2,style 引用错了,这里必须写 css,否则 也会被过滤掉样式. 整个 webpack.config.js文件内容: /** * 测试环境用 */ 'use strict'; var path = require('path'); var webpack = require('webpack'); module.exports = { //devtool: 'eval-source-map',// 如果出错,可以知道源文件的位置 -- 这个会使得编译后的js文件变大 entry: ['webpack/hot/dev-server',path.resolve(__dirname,'./app/main.js')],output: { path: path.resolve(__dirname,'./build'),filename: 'bundle.js' },devServer: { inline: true,// 实时刷新 historyApiFallback: true,//不跳转 port: 8181 },module: { loaders: [ { test:/.css$/,//exclude:/node_modules/,// 这里千万要注意了,按需加载时,没有样式,这里弄的 loader:"style-loader!css-loader" },{ test: /.js?$/,exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: { presets: ['es2015','react'],plugins: ['transform-runtime',['import',{ libraryName: 'antd',style: 'css' // or true or css 这里必须是 css,否则样式不能加载 }]] } } ] },plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/,// may apply this only f options: { // babel: { // //presets: ['es2015','stage-0',// plugins: ['transform-runtime',{ // libraryName: 'antd',// style: 'true' // or true // }]] // } } }),new webpack.BannerPlugin('文件头注释写这里吧!'),new webpack.optimize.UglifyJsPlugin({ compress:{ warnings:true },output:{ comments:true } }),new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }),new webpack.HotModuleReplacementPlugin() ] }; 参考: http://www.52php.cn/article/p-hfezunlw-mz.html https://github.com/ant-design/babel-plugin-import (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |