|
|
@@ -0,0 +1,135 @@
|
|
|
+const { resolve } = require("path");
|
|
|
+//提取css
|
|
|
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
|
+//压缩css
|
|
|
+const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
|
|
|
+//js语法检查
|
|
|
+const EsLintPlugin = require('eslint-webpack-plugin')
|
|
|
+//html资源处理
|
|
|
+const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
|
+//设置node环境变量 postcss-loader会根据它读取package.js里的browserslist配置
|
|
|
+process.env.NODE_ENV = 'development'
|
|
|
+
|
|
|
+//复用loader
|
|
|
+const commonCssLoader = [
|
|
|
+ MiniCssExtractPlugin.loader, //提取css
|
|
|
+ 'css-loader',
|
|
|
+ {
|
|
|
+ loader: 'postcss-loader', //兼容性处理
|
|
|
+ options: {
|
|
|
+ // 旧版本配置
|
|
|
+ /* ident: 'postcss',
|
|
|
+ plugins: () => [
|
|
|
+ require('postcss-preset-env')() //读取package.json里browserslist配置，默认加载根据node_env加载production
|
|
|
+ ] */
|
|
|
+ postcssOptions: {
|
|
|
+ plugins: [
|
|
|
+ [
|
|
|
+ 'postcss-preset-env'
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+module.exports = {
|
|
|
+ entry: './src/js/index.js',
|
|
|
+ output: {
|
|
|
+ filename: 'js/built.js',
|
|
|
+ path: resolve(__dirname, 'build')
|
|
|
+ },
|
|
|
+ module:{
|
|
|
+ rule:[{
|
|
|
+ // 以下loader只会匹配一个 提高效率
|
|
|
+ // 注意：不能有两个配置处理同一种文件
|
|
|
+ oneOf:[
|
|
|
+ {
|
|
|
+ test:/\.css$/,
|
|
|
+ use: [
|
|
|
+ ...commonCssLoader
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test:/\.less$/,
|
|
|
+ use:[
|
|
|
+ ...commonCssLoader,
|
|
|
+ 'less-loader'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { //兼容性处理
|
|
|
+ test:/\.js$/,
|
|
|
+ exclude: /node_modules/,
|
|
|
+ loader: 'babel-loader',
|
|
|
+ options:{
|
|
|
+ // 预设：指示babel做怎样的兼容性处理
|
|
|
+ presets:[
|
|
|
+ [
|
|
|
+ '@babel/preset-env',
|
|
|
+ {
|
|
|
+ useBuiltIns: 'usage',
|
|
|
+ corejs:{
|
|
|
+ version:3
|
|
|
+ },
|
|
|
+ targets:{
|
|
|
+ chrome: '60',
|
|
|
+ firefox: '60',
|
|
|
+ ie:'9',
|
|
|
+ safari: '10',
|
|
|
+ edge: '17'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //处理图片
|
|
|
+ {
|
|
|
+ test:/\.(jpg|png|jpeg|gif)/,
|
|
|
+ loader:'url-loader',
|
|
|
+ options:{
|
|
|
+ limit:8*1024,
|
|
|
+ name:'[hash:10].[ext]',
|
|
|
+ outputPath:'imgs',
|
|
|
+ esModule: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //html 处理
|
|
|
+ {
|
|
|
+ test:/\.html$/,
|
|
|
+ loader:'html-loader'
|
|
|
+ },
|
|
|
+ //其他资源处理
|
|
|
+ {
|
|
|
+ exclude:/\.(js|css|less|html|jpg|jpeg|png|gif)/,
|
|
|
+ loader:'file-loader',
|
|
|
+ options:{
|
|
|
+ outputPath:'media',
|
|
|
+ esModule: false,
|
|
|
+ name: '[hash:10].[ext]'
|
|
|
+ },
|
|
|
+ type: 'javascript/auto'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ plugins:[
|
|
|
+ new MiniCssExtractPlugin({
|
|
|
+ filename: 'css/built.css'
|
|
|
+ }),
|
|
|
+ new OptimizeCssAssetsWebpackPlugin(),
|
|
|
+ new EsLintPlugin({
|
|
|
+ extensions: ['js', 'json', 'coffee'],
|
|
|
+ //exclude: '/node_modules/',
|
|
|
+ fix:true
|
|
|
+ }),
|
|
|
+ new HtmlWebpackPlugin({
|
|
|
+ template: './src/index.html',
|
|
|
+ minify:{
|
|
|
+ collapseWhitespace:true,
|
|
|
+ removeComments:true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ mode:'production'
|
|
|
+}
|
