webpack 使用教程干货

老规矩 直接上干货。只要跟着做就能实现。

现在是2017年12月，千万不要盲目升级webpack3, 很多坑，非常不稳定。2.2.1很稳定建议暂时不要升级3

安装

首先全局安装webpack 目前最新的是2.2.1

rpm install -g webpack

在项目目录中安装插件包

npm install webpack@2.2.0-rc.2 webpack-dev-server@2.2.0-rc.0 html-webpack-plugin@2 html-loader css-loader style-loader file-loader url-loader --save-dev

使用方法一：

创建模块入口文件 项目目录/src/app.js

//引入src/test.js模块
cats = require('./test.js');
console.log(test);

创建模块 项目目录/src/test.js

//输出模块
var test = ['t1', 't2', 't3'];
module.exports = test;

在src目录下 输入下列领命 即可创得到处理后的js文件

webpack  app.js  app.bundle.js

使用方法二：

通过使用配置文件的方法使用webpack

在项目根目录下创建webpack配置文件webpack.config.js

module.exports = {
    //定义入口文件
    entry: './src/app.js',
    //定义输出文件
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    }
};

然后就可以直接输入打包命令

//打包当前目录中 配置文件中所示的程序
webpack

如果加-p 即可同时完成代码压缩混淆

//混淆压缩代码
webpack -p  

使用node命令可以直接获取模块输出

 node dist/app.bundle.js

解析模块

添加bable

//安装abbel
npm install babel-core babel-preset-es2015
//安装babelloader
rpm install babel-loader --save-dev

module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js',
    },

    module: {
        loaders: [
            //js处理
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            //css处理
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/,
                loader: "style!css!sass"
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
        ]
    }
}

添加第三方库

//安装jquery 和es2015兼容库
npm install jquery  babel-polyfill --save

修改src/app.js文件

import 'babel-polyfill';
import cats from './test';
import $ from 'jquery';

$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
    $('<li></li>').text(cat).appendTo(ul);
}

启用压缩插件

//定义webpack组件
const webpack = require('webpack');
module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    //压缩插件
    plugins: [
         new webpack.optimize.UglifyJsPlugin({
        compress: {
                 warnings: false,
             },
            output: {
               comments: false,
            },
       }),
     ]
};

显示所有隐藏模块

这里写代码片

监控文件改动 自动处理

//该命令会自动只检索发生改变的部分。速度很快
ebpack --watch

启用预览服务器

//安装webpack服务器
npm install webpack-dev-server --save-dev
//运行服务器
webpack-dev-server --progress --colors
webpack-dev-server --inline

//访问预览地址  后面name为entry入口文件名 不加.JS  
http://localhost:8080/webpack-dev-server/[name]

配置typescript

//安装typescript
npm install -g typescript
//配置tsconfig.json


//安装loader
npm install ts-loader --save-dev
//简单配置
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js"
    },
    resolve: {
        // Add '.ts' and '.tsx' as a resolvable extension.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
};

dist目录自动清除

//安装模块
npm install rimraf --save-dev
//修改package.json   添加rimraf dist
{
  "scripts": {
    "build": "rimraf dist && webpack -p --env.config production"
  },
}

css自动添加跨浏览器版本前缀

//安装
npm install postcss-loader autoprefixer --save-dev
//修改 loader  添加pstcss-loader
{
  test: /\.css$/,
  loader: 'style-loader!css-loader!postcss-loader'
}
//创建文件 postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

完整的基本配置模块

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = (options = {}) => {
    return {
        //入口文件 可多个   key为文件名 输出可用[name]引用
        entry: {
            app: __dirname + '/src/app.js',

            // tsapp: __dirname + '/src/tsapp.ts',
            vendor: ['jquery', 'axios'],
        },
        //出口文件  根据入口文件名自动生成
        output: {
            // publicPath: "http://127.0.0.1:9090/static/dist/",
            // publicPath: '/assets/',
            path: __dirname + '/dist',
            filename: '[name].bundle.js'
        },
        resolve: {
            // Add '.ts' and '.tsx' as a resolvable extension.
            extensions: ["css", ".sass", "style!css!less", "html", ".ts", ".tsx", ".js", "less"]
        },
        module: {
            //代码解析器
            loaders: [
                //babel
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                },
                //css
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader!postcss-loader'
                },
                //scss
                {
                    test: /\.scss$/,
                    loader: "style!css!sass"
                },
                //less
                {
                    test: /\.less$/,
                    loader: "style!css!less"
                },
                //html
                {
                    test: /\.html/,
                    loader: 'html-loader',
                },
                //typescript
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader"
                },
                //低于10000字节的文件解析为base64编码 匹配各种格式的图片和字体文件 
                {
                    test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000
                    },

                }
            ],
        },
        //插件
        plugins: [
            //代码压缩  生产时使用
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                output: {
                    comments: false,
                },
            }),
            //自动生成引用js的html入口文件
            new HtmlWebpackPlugin({
                // template: './src/index.html'
                // index: __dirname + 
                //生成网页标题
                title: "test111",
                //文件名与地址
                filename: __dirname + '/index.html',
                //化为hash 
                // hash : true,
                //缓存
                //cache:false,
                //使用模版
                // template: __dirname + '/index.html',
                //模版注入位置
                // inject: 'body'
            }),
            //第三方库  在input处 设置后，在这里引入
            new webpack.optimize.CommonsChunkPlugin({
                names: ["vendor"],
                minChunks: Infinity
            })
        ],
        //预览服务器配置
        devServer: {
            port: 8080,
            /*
            historyApiFallback用来配置页面的重定向
            SPA的入口是一个统一的html文件, 比如
            http://localhost:8010/foo
            我们要返回给它
            http://localhost:8010/index.html
            配置为true, 当访问的文件不存在时, 返回根目录下的index.html文件
            */
            historyApiFallback: true,

            //控制台输入webpack-dev-server -d --hot --env.dev 即可预览  但是这个预览只能预览项目文件 就是入口的.JS JSX TS 等。不能从主页html预览。因为主页是静态的，他引用的也是之前生成的js文件。如果要预览全局  需要--watch
            //-d 是开发模式 --hot是热更新
        },
        performance: {
            hints: options.dev ? false : 'warning',
        }
    }
};