码迷,mamicode.com
首页 > Web开发 > 详细

webpack入门详解

时间:2017-08-24 01:11:49      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:art   src   heap   replace   hash   llb   project   dep   loader   

  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
技术分享
 1 //常见webpack配置
 2 // 一个常见的webpack配置文件
 3 const webpack = require(webpack);    //定义常量
 4 const HtmlWebpackPlugin = require(html-webpack-plugin);
 5 const ExtractTextPlugin = require(extract-text-webpack-plugin);
 6 
 7 module.exports = {
 8     entry: __dirname + "/app/main.js",//唯一入口文件
 9     output: {
10         path: __dirname + "/build",   //输出文件
11         filename: "bundle-[hash].js"
12     },
13     devtool: none,
14     devServer: {
15         contentBase: "./public",//本地服务器所加载的页面所在的目录
16         historyApiFallback: true,//失败不跳转
17         inline: true,
18         hot: true
19     },
20     module: {
21         rules: [
22             {
23                 test: /(\.jsx|\.js)$/,
24                 use: {
25                     loader: "babel-loader"
26                 },
27                 exclude: /node_modules/
28             },
29             {
30                 test: /\.css$/,
31                 use: [
32                     {
33                         loader: "style-loader"
34                     }, {
35                         loader: "css-loader",
36                         options: {
37                             modules: true
38                         }
39                     }, {
40                         loader: "postcss-loader"
41                     }
42                 ]
43             }
44         ]
45     },
46     plugins: [
47         new webpack.BannerPlugin(版权所有,翻版必究),
48         new HtmlWebpackPlugin({
49             template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
50         }),
51         new webpack.optimize.OccurrenceOrderPlugin(),
52         new webpack.optimize.UglifyJsPlugin(),
53         new ExtractTextPlugin("style.css")
54     ],
55 };
View Code

  配置package.json文件

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

模板:

技术分享
 1 {
 2   "name": "webpack-demo",
 3   "version": "1.0.0",
 4   "description": "Sample webpack project",
 5   "scripts": {
 6     "test": "echo \"Error: no test specified\" && exit 1",
 7     "start": "webpack",
 8     "server": "webpack-dev-server --open"
 9   },
10   "author": "zeng",
11   "license": "ISC",
12   "devDependencies": {
13     "webpack": "^3.5.4"
14   }
15 }
16     //注:JSON文件不支持注释,引用时请清除注释
View Code

  配置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入门详解

标签:art   src   heap   replace   hash   llb   project   dep   loader   

原文地址:http://www.cnblogs.com/zengming/p/7415276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!