webpack2学习

2017-12-11  本文已影响0人  lemonzoey

webpack2学习

webpack2基本介绍

介绍

官网

webpack1和webpack2的一些区别

快速开始

新建项目结构

安装依赖

编写配置文件

var path=require('path')

module.exports = {
    // 指定spa应用的入口文件
    entry: path.resolve(__dirname, 'src/js/app.js'),
    // 指定项目构建的输出位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    }
}

运行

把运行命令放到package.json文件中

监听代码变化自动重新构建

webpack-deve-server介绍

基本使用

热更新

devServer: {
    // 指定启动服务的更目录
    contentBase: __dirname + '/src',
    // 指定端口号
    port: 8080,
    host: 'localhost',
    // 启用热更新
    hot: true,
    // 以下信息可有可无，为了完整
    inline: true, 
    historyApiFallback: true,
    noInfo: false,
    // stats: 'minimal',
    // publicPath: publicPath
},

var webpack=require('webpack')

plugins: [
   new webpack.HotModuleReplacementPlugin(),
]

Loaders（加载器）

处理es6、es7、jsx语法加载器

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            }
        ]
    }

{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

处理css文件引用的加载器

 // 处理在js中引用css文件
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

处理scss或者less文件引用的加载器

  // 处理在js中引用scss文件
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
},

处理图片引用的加载器

// 处理图片操作  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader'
},

处理字体文件引用的加载器

// 处理字体文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader'
}

发布策略

 // 处理图片操作  25000bit ~3kb
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: 'url-loader?limit=25000&name=images/[name].[ext]'
},
// 处理字体文件
{
    test: /\.(eot|woff|ttf|woff2|svg)$/,
    use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}

Plugins（插件）

删除插件

var CleanPlugin = require('clean-webpack-plugin');

plugins: [
    // 删除文件夹的插件
    new CleanPlugin(['dist'])
]

抽取公共js插件

 entry: {
        app: path.resolve(__dirname, 'src/js/app.js'),
        vendors: ['vue','vue-router','vuex']
    },
    
    
plugins: [
    // 分离第三方应用的插件
    new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
]

提取样式文件插件

// 1、抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// 2、处理在js中引用css文件
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader"
    })
},
// 处理在js中引用scss文件
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader!sass-loader"
    })
},

//3、加一个插件
plugins: [
    // 删除文件夹的插件
    new ExtractTextPlugin("app.css"),
]

自动生成html插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>webpack学习</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    // 自动生成html插件
   new HtmlWebpackPlugin({
       template: './src/template.html',
       htmlWebpackPlugin: {
           "files": {
               "css":["app.css"],
               "js": ["vendors.js", "bundle.js"]
           }
       },
       minify: {
           removeComments: true,
           collapseWhitespace: true,
           removeAttributeQuotes: true
       }
   }),
]

压缩插件

plugins: [
   // 压缩混淆js代码插件
   new webpack.optimize.UglifyJsPlugin({
       beautify: false,
       mangle: {
           screw_ie8: true,
           keep_fnames: true
       },
       compress: {
           warnings: false,
           screw_ie8: true
       },
       comments: false
   }),
]

定义生产环境插件

plugins: [
  // 在构建的过程中删除警告
   new webpack.DefinePlugin({
       'process.env':{
           NODE_ENV:'"production"'
       }
   })
]

自动打开浏览器插件

// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

plugins: [
    // 删除文件夹的插件
   new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

高级

和gulp的集成

// gulp的任务是控制执行流程，webpack的任务是处理复杂引用的依赖

var gulp = require('gulp');
// 删除文件和目录
var del = require('del');
// 按顺序执行
var gulpSequence = require('gulp-sequence');
// 引入webpack的本地模块
var webpack = require("webpack");
// 引入wbpack的配置文件
var webpackConfig = require("./webpack.publish.config.js");

gulp.task('default', ['sequence'], function () {
    console.log("项目构建成功");
});

// 流程控制
gulp.task('sequence', gulpSequence('clean','webpack'));

// 删除文件和文件夹
gulp.task('clean', function (cb) {
    //del('dist);// 如果直接给dist的目录，项目启动的顺序还有清除结果会报错，所以要写的更详细一些
    del(['dist/*.js', 'dist/*.css', 'dist/images', 'dist/fonts,','dist/*.html']).then(function () {
        cb()
    });
});


//写一个任务，在gulp中执行webpack的构建
// gulp 负责任务流程部分的操作，webpack负责复杂模块系统的引用分离工作
gulp.task('webpack', function (cb) {
    // 执行webpack的构建任务
    webpack(webpackConfig, function (err, stats) {

        if (err) {
            console.log("构建任务失败");
        } else {
            cb();
        }

    });
});

和eslint的集成

组件库按需加载处理

react中的antd按需加载配置

npm install babel-plugin-import -save-dev
{
  "presets": ["es2015", "react","stage-0","stage-1","stage-2","stage-3"],
  "plugins": [
    ["import", { "libraryName": "antd","style": "css" }]
  ]
}

vue总的element按需加载配置

npm install babel-plugin-component-save-dev
{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]
    ]
  ]
}
上一篇下一篇

猜你喜欢

热点阅读