webpack的使用以及工作流程
一.安装准备工作
1.首先安装node.js
2.全局指令安装webpack或基于项目安装
npm install webpack -g
3.创建一个项目根目录cd至项目根目录
初始化一个项目，会生成一个package.json文件
npm init
二.初步webpackp配置
1.在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
在这里插入图片描述
src文件夹：
在这里插入图片描述
2.在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件:
//webpack.config.js
module.exports = {
entry : './src/js/entry.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname + '/out'//输出文件路径
},
三.webpack进一步配置
开发服务器配置（devSever）
module.loaders配置
plugins配置（内置插件与外置插件）
//详细的webpack.config.js结构分析：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
module.exports = {
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": path.resolve( __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.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.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'}
], path.resolve(__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',
'bower_components',
'lib',
'src'
]
}
};
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
new webpack.optimize.OccurenceOrderPlugin()
])
}
网友评论