React小项目（React+webpack+nodejs）--- 二、js、css、html文件处理
一、js压缩打包以及babel的配置
babel
我们的项目基于react，因此需要babel，它能够将jsx转换为ES5语法,也能将ES6转换为ES5语法。
1、npm install babel-loader babel-core --save-dev
进一步的配置 presets
npm install babel-preset-es2015 babel-preset-react --save-dev
在项目根目录创建 .babel，内容为：
{
"presets": [
"react",
"es2015"
]
}2、在 webpack config. js文件中增加：
module: {
rules: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
},1、首先webpack config. js文件中引入：
const uglify = require('uglifyjs-webpack-plugin');plugins: [
new uglify(),//压缩js代码
]二、css文件压缩打包
1、在public/stylesheets下新建css文件夹，在文件夹下新建名为index.css文件，输入以下代码：
* {
margin: 0;
padding: 0;
font: 14px "Microsoft Yahei";
}
article, aside, footer, header, nav, section{
display: block;
max-width: 100%;
position: relative;
}
nav ul {
list-style: none;
}
a {
text-decoration: none;
cursor: pointer;
}
2、在css文件建立好之后，需要引入到入口文件，这里我们引入到index_entry.js中，在index_entry.js中加入：
import css from '../stylesheets/index.css'3、npm install style-loader css-loader --save-dev
4、在webpack config. js文件中增加：
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,//增加这两行
use: ['style-loader', 'css-loader']
}
]
},有时候我们需要把css提取出来，单独打包成一个文件，（主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象），这时需要用到extract-text-webpack-plugin
1、npm install extract-text-webpack-plugin --save-dev
2、在webpack config. js文件中引入：
const ExtractTextPlugin = require('extract-text-webpack-plugin');将module配置项中css的部分修改为：
test: /\.css$/,
use: ExtractTextPlugin.extract({
falllback: 'style-loader',
use: 'css-loader'
})3、在webpack.config.js文件中的plugins配置项中修改：
plugins: [
new uglify(),
new ExtractTextPlugin('css/[name].css'),//加入这一行
]然后执行npm run watch会报错，这是由于extract-text-webpack-plugin目前还没有webpack4版本，可以使用该方式：
npm install extract-text-webpack-plugin@next
再执行npm run watch，则可以在build/css路径下看到css文件打包的结果
如果需要进一步对css文件进行压缩，可以将module配置项中css的部分修改为：
{
// test: /\.css$/,
// use: ['style-loader', 'css-loader']
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader',
options: {
minimize: true, //css压缩
url: false,
sourceMap: true
}
}]
})
}三、html文件的发布
目前我们在html文件中对于js文件的引用是通过手动添加最终的编译路径来实现的，如下：
1、npm install html-webpack-plugin --save-dev
2 、 在webpack config. js文件中引入：const htmlPlugin = require('html-webpack-plugin');3、项目根目录下建立名为config文件夹，在config文件夹下建立名为html-webpack-plugin.config.js文件，文件内容如下：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = [
new HtmlWebpackPlugin({
//生成html文件的文件名
filename: 'template/index.html',
//对应引用的文件
chunks: ['index'],
inject: true,
template: path.resolve(__dirname, '../template/index.html'),
hash: true, //给生成的文件一个独特的hash值
minify: { removeAttributeQuotes: true}
}),
]4、在webpack.config.js文件中的plugins配置项中修改：
plugins: [
new uglify(),
new ExtractTextPlugin('css/[name].css'),
htmlWebpackPluginConfig[0]//新加入这一行
]