webpack 1X 环境配置
来源:互联网 发布:手机安装软件代理 编辑:程序博客网 时间:2024/06/05 12:39
开发环境的配置
var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成htmlvar ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录,以此类推var APP_FILE = path.resolve(APP_PATH, 'index.js'); //根目录文件app.jsx地址var BUILD_PATH = path.resolve(ROOT_PATH, './build'); //发布文件所存放的目录module.exports = { devtool: 'source-map', entry: { app: APP_FILE }, output: { // publicPath: 'public', //编译好的文件,在服务器的路径,这是静态资源引用路径 path: BUILD_PATH, //编译到当前目录 filename: 'static/js/[name][hash:8].js', //编译后的文件名字 chunkFilename: 'static/js/[name].[chunkhash:5].min.js', }, module: { loaders: [ {test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'}, {test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015&presets[]=stage-0' }, {test: /.css$/, loader: ExtractTextPlugin.extract('style', 'css')}, {test: /\.(jpg|png|jpeg|gif|svg)$/, loader: "url?limit=8192&name=static/img/[name].[ext]"}, {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file?limit=8192&name=static/file/[name].[ext]'}, {test: /\.json$/,loader: 'json'} ] },resolve: { extensions: ['', '.es6','.js', '.jsx', '.json', '.css', '.less'], alias: { comp: path.join(__dirname, "./src/components"), style: path.join(__dirname, "./src/css"), img: path.join(__dirname, "./src/img"), view: path.join(__dirname, "./src") } }, devServer: { port:8080, contentBase: 'public',// boolean | string | array, static file location compress: true, // enable gzip compression historyApiFallback: true, // true for index.html upon 404, object for multiple paths hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin https: false, // true for self-signed, object for cert authority // noInfo: true, // only errors & warns on hot reload }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('development') //定义编译环境 } }), new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML filename: 'index.html', //生成的html存放路径,相对于 path template: 'public/index.html', //html模板路径 hash: false, }), new ExtractTextPlugin('static/css/[name].css') ]};生产环境配置
var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成htmlvar ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录,以此类推var APP_FILE = path.resolve(APP_PATH, 'index.js'); //根目录文件app.jsx地址var BUILD_PATH = path.resolve(ROOT_PATH, './build'); //发布文件所存放的目录module.exports = { devtool: 'cheap-module-eval-source-map', entry: { app: APP_FILE }, output: { publicPath: './', //编译好的文件,在服务器的路径,这是静态资源引用路径 path: BUILD_PATH, //编译到当前目录 filename: 'static/js/[name][hash:8].js', //编译后的文件名字 chunkFilename: 'static/js/[name].[chunkhash:5].min.js', }, module: { loaders: [ {test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'}, {test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015&presets[]=stage-0' }, {test: /.css$/, loader: ExtractTextPlugin.extract('style', 'css')}, {test: /\.(jpg|png|jpeg|gif|svg)$/, loader: "url?limit=8192&name=static/img/[name].[ext]"}, {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file?limit=8192&name=static/file/[name].[ext]'}, {test: /\.json$/,loader: 'json'} ] },resolve: { extensions: ['', '.es6','.js', '.jsx', '.json', '.css', '.less'], alias: { comp: path.join(__dirname, "./src/components"), style: path.join(__dirname, "./src/css"), img: path.join(__dirname, "./src/img"), view: path.join(__dirname, "./src") } }, plugins: [ new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML filename: 'index.html', //生成的html存放路径,相对于 path template: 'public/index.html', //html模板路径 hash: false, }), new ExtractTextPlugin('static/css/[name].css') ]};
package.json, 我这里配置的是有react 和framework7的开发依赖不需要刻意删除
{ "name": "my-app", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.9.0" }, "dependencies": { "framework7": "^1.5.3", "framework7-react": "^0.9.2", "react": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "build": "webpack --config webpack.config.pro.js -p --progress --colors", "start": "webpack-dev-server --inline --progress --colors --hot --config webpack.config.dev.js" }}
阅读全文
0 0
- webpack 1X 环境配置
- webpack环境配置
- webpack环境的配置
- webpack 代理服务器环境配置
- webpack配置环境实用步骤(-)
- webpack入门+react环境配置
- webpack 入门环境配置教程
- webpack入门+react环境配置
- React+Webpack开发环境配置
- webpack+react+es6环境配置
- webpack 配置 react 开发环境
- React+Webpack开发环境配置
- 搭建vue2.x+webpack简易开发环境
- 从零搭建个人博客(1)-webpack环境配置
- Webpack配置开发环境和生产环境
- webpack 3.X 安装与配置
- Material-UI + React + Babel + Webpack 环境配置
- webpack(三)本地服务器环境配置
- 银行家算法实现
- ply格式转换成点云pcd格式
- 关于公钥私钥证书的理解
- 密码学复习笔记4【公钥密码技术、RSA 、ElGamal】
- CentOs 7下安装Tomcat 8
- webpack 1X 环境配置
- Java设计模式1-单例设计模式
- Android百度地图开发定位和路线导航
- 多线程
- 字符版本贪吃蛇游戏设计
- 219. Contains Duplicate II
- tf.stack和tf.unstack
- 会结账的服务器
- 公司主体价值的缺失与社会经济反弹乏力