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

 1 import path from 'path'
 2 import config from "./webpack.config"
 3 import merge from "webpack-merge"
 4 import webpack from "webpack"
 5 import webpackDevServer from "webpack-dev-server"
 6 import { format } from 'util'
 7 
 8 let PORT = 1699;
 9 let PUBLIC_PATH = "http://localhost:" + PORT + "/";
10 let webpackConifg = merge(config, {
11     devtool: "source-map",//生成Source Maps,模式有source-map，cheap-module-source-mapeval-source-map，cheap-module-eval-source-map
12     //debug: true, webpack2 已切换到plugins中，据说在3中将取消
13     entry: {
14         main: [
15             format("webpack-dev-server/client?%s", PUBLIC_PATH),
16             "webpack/hot/dev-server",
17             "./src/main/main.ts"    //唯一入口文件
18         ]
19     },
20     output: {
21         path: path.resolve(__dirname, '../../dist'),//打包后输出文件的文件夹
22         publicPath: PUBLIC_PATH,
23         filename: '[name].js'
24     },
25     devServer: {
26         contentBase: "./public",//本地服务器所加载的页面所在的目录
27         historyApiFallback: true,//不跳转
28         inline: true//实时刷新
29     },
30     module: {
31         rules: [
32             {
33                 test: /(\.jsx|\.js)$/,
34                 use: {
35                     loader: "babel-loader",
36                     options: {
37                         presets: ["es2015", "react"]
38                     }
39                 },
40                 exclude: /node_modules/
41             },
42             {
43                 test: /\.css$/,
44                 use: [
45                     {
46                         loader: "style-loader"
47                     }, {
48                         loader: "css-loader",
49                         options: {
50                             modules: true
51                         }
52                     }, {
53                         loader: "postcss-loader"
54                     }
55                 ]
56             },
57             {
58                 test: /\.(png|jpg)$/,
59                 loader: 'url-loader?limit=10000&name=build/[name].[ext]'
60             }
61         ]
62     },
63     plugins: [
64         new webpack.HotModuleReplacementPlugin(),
65         new webpack.BannerPlugin('版权所有，翻版必究'),
66         new HtmlWebpackPlugin({
67             template: __dirname + "/app/index.tmpl.html"//new一个这个插件的实例，并传入相关的参数
68         }),
69         new webpack.optimize.OccurrenceOrderPlugin(),
70         new webpack.optimize.UglifyJsPlugin(),
71         new ExtractTextPlugin("style.css")
72     ]
73 })
74 const compiler = webpack(webpackConifg);
75 new webpackDevServer(compiler, {
76     inline: true,
77     hot: true,
78     port: PORT,
79     stats: {
80         colors: true
81     }
82 }).listen(PORT, 'localhost', (err) => {
83     console.log("localhost listen error")
84 })

View Code