webpack入门详解

　　webpack入门详解(基于webpack 3.5.4 2017-8-22)

　　webpack常用命令：

webpack --display-error-details //执行打包

webpack -w // 提供watch方法；实时进行打包更新

webpack -p // 对打包后的文件进行压缩

webpack -d // 提供source map，方便调式代码

webpack -dev-server --open //运行webpack开发服务

webpack --config webpack.custom.config.js //指定webpack配置文件

webpack --colors //输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack –profile //输出性能数据，可以看到每一步的耗时

webpack --display-modules //默认情况node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

　　webpack是什么

　　webPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

　　安装

//全局安装

npm install webpack -g

//安装到你的项目目录

npm install -save-dev webpack

　　配置webpack配置文件

配置文件名：webpack.config.js，执行命令：webpack --display-error-details

 import path from 'path'

 import config from "./webpack.config"

 import merge from "webpack-merge"

 import webpack from "webpack"

 import webpackDevServer from "webpack-dev-server"

 import { format } from 'util'

 let PORT = ;

 let PUBLIC_PATH = "http://localhost:" + PORT + "/";

 let webpackConifg = merge(config, {

     devtool: "source-map",//生成Source Maps,模式有source-map，cheap-module-source-mapeval-source-map，cheap-module-eval-source-map

     //debug: true, webpack2 已切换到plugins中，据说在3中将取消

     entry: {

         main: [

             format("webpack-dev-server/client?%s", PUBLIC_PATH),

             "webpack/hot/dev-server",

             "./src/main/main.ts"    //唯一入口文件

         ]

     },

     output: {

         path: path.resolve(__dirname, '../../dist'),//打包后输出文件的文件夹

         publicPath: PUBLIC_PATH,

         filename: '[name].js'

     },

     devServer: {

         contentBase: "./public",//本地服务器所加载的页面所在的目录

         historyApiFallback: true,//不跳转

         inline: true//实时刷新

     },

     module: {

         rules: [

             {

                 test: /(\.jsx|\.js)$/,

                 use: {

                     loader: "babel-loader",

                     options: {

                         presets: ["es2015", "react"]

                     }

                 },

                 exclude: /node_modules/

             },

             {

                 test: /\.css$/,

                 use: [

                     {

                         loader: "style-loader"

                     }, {

                         loader: "css-loader",

                         options: {

                             modules: true

                         }

                     }, {

                         loader: "postcss-loader"

                     }

                 ]

             },

             {

                 test: /\.(png|jpg)$/,

                 loader: 'url-loader?limit=10000&name=build/[name].[ext]'

             }

         ]

     },

     plugins: [

         new webpack.HotModuleReplacementPlugin(),

         new webpack.BannerPlugin('版权所有，翻版必究'),

         new HtmlWebpackPlugin({

             template: __dirname + "/app/index.tmpl.html"//new一个这个插件的实例，并传入相关的参数

         }),

         new webpack.optimize.OccurrenceOrderPlugin(),

         new webpack.optimize.UglifyJsPlugin(),

         new ExtractTextPlugin("style.css")

     ]

 })

 const compiler = webpack(webpackConifg);

 new webpackDevServer(compiler, {

     inline: true,

     hot: true,

     port: PORT,

     stats: {

         colors: true

     }

 }).listen(PORT, 'localhost', (err) => {

     console.log("localhost listen error")

 })

 //常见webpack配置

 // 一个常见的webpack配置文件

 const webpack = require('webpack');    //定义常量

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

 const ExtractTextPlugin = require('extract-text-webpack-plugin');

 module.exports = {

     entry: __dirname + "/app/main.js",//唯一入口文件

     output: {

         path: __dirname + "/build",   //输出文件

         filename: "bundle-[hash].js"

     },

     devtool: 'none',

     devServer: {

         contentBase: "./public",//本地服务器所加载的页面所在的目录

         historyApiFallback: true,//失败不跳转

         inline: true,

         hot: true

     },

     module: {

         rules: [

             {

                 test: /(\.jsx|\.js)$/,

                 use: {

                     loader: "babel-loader"

                 },

                 exclude: /node_modules/

             },

             {

                 test: /\.css$/,

                 use: [

                     {

                         loader: "style-loader"

                     }, {

                         loader: "css-loader",

                         options: {

                             modules: true

                         }

                     }, {

                         loader: "postcss-loader"

                     }

                 ]

             }

         ]

     },

     plugins: [

         new webpack.BannerPlugin('版权所有，翻版必究'),

         new HtmlWebpackPlugin({

             template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

         }),

         new webpack.optimize.OccurrenceOrderPlugin(),

         new webpack.optimize.UglifyJsPlugin(),

         new ExtractTextPlugin("style.css")

     ],

 };

　　配置package.json文件

创建一个package.json文件或者在终端中使用npm init命令可以自动创建这个package.

模板：

 {

   "name": "webpack-demo",

   "version": "1.0.0",

   "description": "Sample webpack project",

   "scripts": {

     "test": "echo \"Error: no test specified\" && exit 1",

     "start": "webpack",

     "server": "webpack-dev-server --open"

   },

   "author": "zeng",

   "license": "ISC",

   "devDependencies": {

     "webpack": "^3.5.4"

   }

 }

     //注：JSON文件不支持注释，引用时请清除注释

　　配置webpack开发环境

npm install --save-dev webpack-dev-server

配置webpack的devserver选项

Loaders：通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

query：为loaders提供额外的设置选项（可选）

　　Babel安装

// npm一次性安装多个依赖模块，模块之间用空格隔开

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

　　CSS安装

npm install --save-dev style-loader css-loader

参考资料：https://doc.webpack-china.org/configuration/

https://zhaoda.gitbooks.io/webpack/content/module-system.html

巴特西

webpack入门详解

最新文章

热门文章