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