React、Vue项目上线前的那些事儿
- 直接使用项目中的东西进行打包
var path = require('path');//引入处理路径path模块
var htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')//每次编译删除dist目录
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");//引入抽离css的插件(将css文件抽离出来的插件)
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css文件的插件
module.exports = {
// entry:path.resolve(__dirname, 'src/js/main.js'),
entry: {
app: path.resolve(__dirname, 'src/js/main.js'),//自己代码的入口
vendors:['jquery'] //第三方包的入口
},
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
module:{
rules:[//配置相关loader的匹配规则
//处理ES6语法的loader(babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-plugin-transform-runtime)
//需要新建一个.babelrc的文件
//{test:/\.css$/, use:['style-loader', 'css-loader']},//处理相关的css文件
{test:/\.css$/, use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})},//处理相关的css文件
//{test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},//处理相关的scss文件(sass-loader node-sass)
{test:/\.scss$/, use:ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})},
//处理相关的scss文件(sass-loader node-sass)
//处理相关的图片和图片路径问题(name=images/[hash:7].[ext])在github的file-loader中查找
// {test:/\.(jpg|png|gif|bmp|jpeg)/, loader:'url-loader?limit=100&name=images/[name].[ext]'},
{test:/\.(jpg|png|gif|bmp|jpeg)/, loader:'url-loader?limit=100&name=[name].[ext]'},
//将高级的js语法转换成低级语法(babel-loader babel-core babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0)
//通过exclude排除node_modules,,一定要排除会报错
{test:/\.js$/, use:'babel-loader', exclude:/node_modules/},
]
},
plugins:[
/* new webpack.HotModuleReplacementPlugin(), //确保浏览器热更新时不出错
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),
filename:'index.html'
}), 发布版本时删除*/
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),
filename:'index.html',
minify:{
collapseWhitespace:true,//合并空白字符
removeComments:true,//移除注释
removeAttributeQuotes: true,//移除多余引号
}
}),
new CleanWebpackPlugin(['dist']),//创建一个删除文件夹,把dist,目录传进去(使用npm的clean-webpack-plugin插件)
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', //指定公共模块的名称
filename:'vendors.js' //指定抽取出来的文件的真实名称
}),
new webpack.optimize.UglifyJsPlugin({//创建JS代码压缩的插件
compress:{//压缩的意思
warnings: false //移除警告信息
}
}),
new webpack.DefinePlugin({//设置产品上线环境, 进一步压缩代码(效果不明显)
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
//(从bundle.js中将css文件抽离出来)npm install --save-dev extract-text-webpack-plugin
//new ExtractTextPlugin("css/styles.css"),//可以这样写只是创建一个css文件夹(原来的写法new ExtractTextPlugin("styles.css"),)
new ExtractTextPlugin('css/style.css'),
//压缩css文件的插件
// new ExtractTextPlugin("styles.css"),
new OptimizeCssAssetsPlugin({
//可以删除不适用,不删除也没事
/* assetNameRegExp: /\.optimize\.css$/g,//有也行没有也行
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true } },
canPrint: true */
}),
]
}
关于export和export default的区别
> 1.- -export default导出的可以自定义接收
- - -export导出的和使用的名称必须一致
> 2.- -使用export default使用名称接收
- - - 使用export必须用{ }来接受,顺序任意(可以按需接收)
> 3.- -export default导出一个对象
- - - export导出多个
-