webpack构建react项目的配置文件

webpack是一个模块打包工具,处理模块之间的依赖同时生成对应模块的静态资源。

  • webpack把项目中所有的静态文件都看作一个模块
  • 模快之间存在着一些列的依赖
  • 多页面的静态资源生成(打包之后生成多个静态文件,涉及到代码拆分)

webpack.config.js文件

//__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录
//webpack.config.js

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

module.exports = {
    devtool: ‘eval-source-map‘,//生成Source Maps,这里选择eval-source-map
    entry:  __dirname + ‘/app/main.js‘,//唯一入口文件,__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录
    output: {//输出目录
        path: __dirname + ‘/build‘,//打包后的js文件存放的地方
        filename: ‘js/[name].js‘//打包后输出的js的文件名
    },
    module: {
        //loaders加载器
        rules: [
        {
                test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式,这里用来匹配js和jsx文件(必须)
                exclude: /node_modules/,//屏蔽不需要处理的文件(文件夹)(可选)
                use: ‘babel-loader‘//babel-loader的名称(必须)
            },
            {
                test:/\.css$/,
                use:[
                ‘style-loader‘,
                ‘css-loader‘
                ]
            },{
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                ‘file-loader‘
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                ‘file-loader‘
                ]
            }
            ]
        },
        plugins: [
        new CleanWebpackPlugin([‘/build‘]),
        new HtmlWebpackPlugin({
            title:"自动生成自定义标题",//如果使用了模板,就使用模板里的title,这里的title设置会失效,哪怕模板里的title为空
            template:‘index.html‘,//需要编译的模板,可以是jade等第三方模板引擎也可以说纯html页面
            // filename:‘demo.html‘,//最终生成的文件名,默认是index.html
            hash:true,//是否给所有包含的js、css文件后面添加hash值,可以用来清除缓存,但好像不是很管用
            inject:true,// | ‘head‘ | ‘body‘ | false  ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,‘head‘ 将放置到 head 元素中。
            //chunks:[‘index‘] //指定生成的文件demo.hmtl需要包括entry里的哪些入口文件(这里是index,main.js不会引入),不设置的话所以入口js文件都会被引入进来
        })],
    //webpack-dev-server配置
    devServer: {
        contentBase: ‘./build‘,//默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到"build"目录)
        historyApiFallback: true,//在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
        inline: true,//设置为true,当源文件改变时会自动刷新页面
        port: 8001,//设置默认监听端口,如果省略,默认为"8080"
    }

};

解析jsx文件需要  新建 .babelrc 文件

cmd进入根目录,输入   type null>.babelrc  ,回车即可

//.babelrc
{
"presets": [
"react",
"es2015"
]
}

  

时间: 2024-11-08 02:25:38

webpack构建react项目的配置文件的相关文章

webpack构建react项目(一)

前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过) 一.新建项目目录 config : webpack 配置文件 dist: 打包后代码 src: 源码目录 二.基础配置 安装基础的包 // 生成默认package.josn 文件 np

使用webpack搭建react项目 webpack-react-project

webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.config.js 首先创建一个项目文件夹,并进入到该文件夹: mkdir react-webpack-project 初始化项目:npm init 根据提示创建package.json 通过NPM安装webpack和webpack-cli,其中-D相当于--save-dev: npm install we

webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理

今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm run dev运行,就抛出这么个错误,百思不得解 错误如下: '$' is defined but never used 1 http://eslint.org/docs/rules/space-before-function-paren 1 http://eslint.org/docs/rule

webpack搭建react项目

遥看套路挖掘机,不见当年老司机.this is a boilerplate 1.新建一个项目目录文件夹,暂且叫seed cd seed npm init 然后一直回车,最后yes,最终生成一个package.json文件 2.新建以下 src  文件夹用于存放js,css,img等源码和引用的静态文件 .babelrc babel编译器配置文件 favicon.ico   浏览器默认读取的一个icon index.html  入口首页 webpack.config.js  webpack配置文件

用Webpack构建Vue项目

开始之前,需要安装node环境.(安装过程在此就不啰嗦了) 1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建. 配置下基本信息即可. 创建一个index.html文件,这个是显示在浏览器中的页面. 注意: 1.这里的暂时并不存在: 2.的数据会被vue文件填入. 创建一个src文件夹,并在文件夹内新建一个main.js文件: 这样我们就完成了一个关于vu

webpack构建vue项目(再谈配置)

webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的解决,最后索性将vue升级到2+,竟然就能识别了,好吧! 1.先分享一下webpack配置vue2+的一些不同(本人亲测): (1)dependencies中的vue默认安装2+,直接运行,会报如下错:[Vue warn]: Failed to mount component: template o

webpack构建vue项目(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

使用Webpack构建React应用

前面写过一遍<使用gulp+Browserify构建React应用>,本文来看看更强大的构建工具- -Webpack.先来看看webpack强大之处介绍 1.将css.图片以及其他资源打包到同一个包中 2.在打包之前对文件进行预处理(less.coffee.jsx等) 3. 根据入口文件的不同把你的包拆分成多个包 4.支持开发环境的特殊标志位 5.支持模块代码"热"替换 6.支持异步加载 ??Webpack不仅帮助你打包所有的Javascript文件,还拥有其他应用需要的资

webpack构建react多页面应用

写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动