webpack的使⽤⼯作流程原理
webpack的使⽤以及⼯作流程
⼀.安装准备⼯作
1.⾸先安装node.js
2.全局指令安装webpack或基于项⽬安装
npm install webpack -g
3.创建⼀个项⽬根⽬录cd⾄项⽬根⽬录
初始化⼀个项⽬，会⽣成⼀个package.json⽂件
npm init
⼆.初步webpackp配置
1.在你的项⽬⽬录下创建fig.js配置⽂件, 通过这个⽂件进⾏webpack的配置, 并且还要创建⼀些路径保存基本⽂件. 例如:
src⽂件夹：
2.在src的js下创建⼀个⼊⼝⽂件, 我创建的叫做entry.js, 在项⽬⽬录再创建⼀个index.html⽤来调试使⽤. 编写fig.js⽂件:
//fig.js
entry : './src/js/entry.js',//⼊⼝⽂件
output : {//输出⽂件
filename : 'index.js',//输出⽂件名
path : __dirname + '/out'//输出⽂件路径
},
三.webpack进⼀步配置
开发服务器配置（devSever）
module.loaders配置
plugins配置（内置插件与外置插件）
//详细的fig.js结构分析：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
devtool: 'source-map',//由于打包后的代码是合并以后的代码，不利于排错和定位，只需要在config中添加，这样出错以后就会采⽤source-map的形式直接显⽰你出错代码的位置。    //noParse:[/jquery/],//表⽰跳过jquery，不对其进⾏编译，这样可以提⾼打包的速度
//页⾯⼊⼝⽂件配置
entry: {
page1: "./src/index.js",
//page2: ["./src/index.js", "./src/main.js"],⽀持数组形式，将加载数组中的所有模块，但以最后⼀个模块作为输出
},
/
/⼊⼝⽂件输出配置
output: {
path: "dist/js/page",
filename: "[name].bundle.js",// page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page ⽂件夹下。
publicPath: "/dist/"    //⽹站运⾏时的访问路径。
},
resolveLoader: {
//指定默认的loader路径，否则依赖⾛到上游会不到loader
root: path.join(__dirname, 'node_modules'),
alias: {//给⾃⼰写的loader设置别名
"seajs-loader": solve( __dirname, "./web_modules/seajs-loader.js" )
}
},
//新建⼀个开发服务器，并且当代码更新的时候⾃动刷新浏览器。
devServer: {
historyApiFallback: true,
noInfo: true,
hot: true,
inline: true,
progress: true,
port:9090 //端⼝你可以⾃定义
module: {
/
/ module.loaders 是最关键的⼀块配置。它告知 webpack每⼀种⽂件都需要使⽤什么加载器来处理：
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },//.css ⽂件使⽤ style-loader 和 css-loader 来处理.
//{ test: /\.css$/, loader: 'style!css' }，其他写法1、"-loader"其实是可以省略不写的，多个loader之间⽤“!”连接起来。
//{ test: /\.css$/, loaders: ["style", "css"] }，其他写法2、⽤loaders数组形式;
//.scss ⽂件使⽤ style-loader、css-loader 和 sass-loader 来编译处理。
//在chrome中我们通过sourcemap可以直接调试less、sass源⽂件⽂件
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.less$/, loader: 'style!css!less?sourceMap'},//.less ⽂件使⽤ style-loader、css-loader 和 less-loader 来编译处理
//.js ⽂件使⽤babel-loader来编译处理，设置exclude⽤来排除node_modules这个⽂件夹中的代码
{ test: /\.js$/, loader: 'babel!jsx',exclude: /node_modules/ },
{ test: /\.jsx$/, loader: "jsx-loader?harmony" },//.jsx ⽂件使⽤ jsx-loader 来编译处理
{ test: /\.json$/,loader: 'json'},
//{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'}, //图⽚⽂件使⽤ url-loader 来处理，⼩于8kb的直接转为base64
{test: /\.(png|jpg|gif|svg)$/,loader: 'url',
query: {limit: 10000,name: '[name].[ext]?[hash]'}//设置图⽚名称扩展名
},
{ test: /\.jade$/, loader: "jade-loader" },//.jade ⽂件使⽤ jade-loader 来编译处理
{ test: /\.ejs$/, loader: "ejs-loader" },//.ejs ⽂件使⽤ ejs-loader 来编译处理
{ test: /\.handlebars$/, loader: "handlebars-loader" },//.handlebars ⽂件使⽤handlebars-loader来编译处理handlebars模板⽂件
{ test: /\.dot$/, loader: "dot-loader" },//.dot ⽂件使⽤ dot-loader 来编译处理dot模板⽂件
{ test: /\.vue$/, loader: "vue-loader" },//.vue ⽂件使⽤ vue-loader 来编译处理
{ test: /\.coffee$/, loader: 'coffee-loader' },//.coffee ⽂件使⽤ coffee-loader 来编译处理
{ test: /\.html$/,loader: 'vue-html'},
{ test: /\.woff$/,loader: "url?limit=10000&minetype=application/font-woff"},
{ test: /\.ttf$/,loader: "file"},
{ test: /\.eot$/,loader: "file"},
{ test: /\.svg$/,loader: "file"}
]
},
//分内置插件和外置插件
plugins: [
//使⽤了⼀个 CommonsChunkPlugin 的插件，它⽤于提取多个⼊⼝⽂件的公共脚本部分，然后⽣成⼀个common.js来⽅便多页⾯之间进⾏复⽤。        new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.optimize.UglifyJsPlugin({//压缩⽂件
compressor: {
warnings: false,//supresses warnings, usually from module minification
},
except: ['$super', '$', 'exports', 'require']    //排除关键字(可选)
}),
new webpack.DefinePlugin({// definePlugin 接收字符串插⼊到代码当中, 所以你需要的话可以写上 JS 的字符串
__DEV__: JSON.stringify(JSON.v.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.v.BUILD_PRERELEASE || 'false'))
}),
new webpack.ProvidePlugin({//把⼀个全局变量插⼊到所有的代码中,⽀持jQuery plugin的使⽤；使⽤ProvidePlugin加载使⽤频率⾼的模块
//provide $, jQuery and window.jQuery to every script
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.NoErrorsPlugin(), //允许错误不打断程序
new TransferWebpackPlugin([ //把指定⽂件夹下的⽂件复制到指定的⽬录
{from: 'www'}
], solve(__dirname,"src")),
new HtmlwebpackPlugin({//⽤于⽣产符合要求的html⽂件;
title: 'Hello World app',
filename: 'assets/admin.html'
})
],
//其它解决⽅案配置
resolve: {
root: 'E:/github/flux-example/src', //绝对路径, 查module的话从这⾥开始查(可选)
extensions: ['', '.js', '.html', '.css', '.scss'], //⾃动扩展⽂件后缀名，意味着我们require模块可以省略不写后缀名
alias: {                            //模块别名定义，⽅便后续直接引⽤别名，⽆须多写长长的地址//后续直接 require('AppStore') 即可
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
},
modulesDirectories: [//取相对路径，所以⽐起 root ，所以会多很多路径。查module(可选)
'node_modules',
vue json字符串转数组'bower_components',
'lib',
'src'
]
}
};
if (v.NODE_ENV === 'production') {
// /en/workflow/production.html
new webpack.DefinePlugin({
'v': {
NODE_ENV: '"production"'
}
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//为组件分配ID，通过这个插件webpack可以分析和优先考虑使⽤最多的模块，并为它们分配最⼩的ID    new webpack.optimize.OccurenceOrderPlugin()
])
}
webpack原理：
参考学习：blog.csdn/u014168594/article/details/77099315
blog.csdn/u014168594/article/details/77198729
把所有依赖打包成⼀个bundle.js⽂件，通过代码分割成单元⽚段并按需加载。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。