建立文件webpack.config.js
1.配置入口和出口:并安装webpack 包
const path = require('path');
module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }}
2.配置js文件
在output后面加:
module: { rules: [ //js,react { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env','react'] } } }}
安装下面的包:
"babel-core": "6.26.0", "babel-loader": "7.1.2", "babel-preset-env": "1.6.1", "babel-preset-react": "6.24.1",
3.配置html插件
在module后面加:本身编译后能生成一个html文件,如果想用自己的html模版,则自己建立一个index.html文件,并引入这个插件
安装插件: "html-webpack-plugin": "2.30.1",
配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html', })],
4.配置样式
安装 "css-loader": "0.28.8","style-loader": "0.19.1"
但是这样css文件没有被分离出来,还需要安装
"extract-text-webpack-plugin": "3.0.2"; 解析出来的scss才能是单独的文件
配置:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },
plugins: [ new ExtractTextPlugin("index.css")]
如果是scss文件,
安装:
"sass-loader": "4.0.0", "node-sass": "4.7.2",
配置:
{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader",'sass-loader'] }) },
5.配置图片文件
安装:"file-loader": "1.1.6",url-loader": "0.6.2"
配置:
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, } } ] },
6.配置字体文件(font-awesome)
配置:
{ test: /\.(otf|eot|svg|ttf|woff|woff2)$/, use: [ { loader: 'url-loader', options: { limit: 8192, } } ] }
7.安装webpack-dev-server包,实现自动刷新
配置:改端口号
devServer: { port:'8086' },
8.如果需要生成的html,css,js各自放在单独的文件里:则需要配置引入插件
const webpack=require('webpack');
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "common", filename: "base.js", }), ],
并修改一些路径地方:
完整的webpack.config.js
const path = require('path'); const webpack=require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), publicPath: "/dist/",//改,为了让生成的html里引入的css,js路径是对的 filename: 'js/index.js'//改 }, module: { rules: [ //js,react { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env','react'] } } }, //样式css { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader",'sass-loader'] }) }, //图片 { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name:'resource/[name].[ext]'//改 } } ] }, //字体 { test: /\.(otf|eot|svg|ttf|woff|woff2)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name:'resource/[name].[ext]'//改 } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html', }), new ExtractTextPlugin("css/index.css"),//改 new webpack.optimize.CommonsChunkPlugin({ name: "common", filename: "base.js", }), ], devServer: { port:'8086' }, };
package.json:
{ "name": "react-happy-gloria", "version": "1.0.0", "description": "react try", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server",//自己配的 "dist":"webpack"//自己配的 }, "repository": { "type": "git", "url": "http://gitlab.ximalaya.com/gloria.hu/react-happy-gloria.git" }, "author": "gloria.hu", "license": "ISC", "devDependencies": { "babel-core": "6.26.0", "babel-loader": "7.1.2", "babel-preset-env": "1.6.1", "babel-preset-react": "6.24.1", "css-loader": "0.28.8", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.6", "html-webpack-plugin": "2.30.1", "node-sass": "4.7.2", "sass-loader": "4.0.0", "style-loader": "0.19.1", "url-loader": "0.6.2", "webpack": "3.10.0", "webpack-dev-server": "2.9.7" }, "dependencies": { "font-awesome": "^4.7.0", "react": "^16.2.0", "react-dom": "^16.2.0" } }