... ...
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/stylesheets/bookmark.css" type="text/css" />
<link rel="stylesheet" href="/stylesheets/mricode.pagination.css" type="text/css" />
<link rel="stylesheet" href="/stylesheets/animate.css" type="text/css" />
<script src="javascripts/jquery-2.1.4.min.js"></script>
<script src="javascripts/mricode.pagination.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script src="javascripts/main.js"></script>
<script src="javascripts/wow.min.js"></script>
... ...
一个简单的web应用所用到的资源
“臃肿”
包管理:bower,npm
构建工具:gulp,grunt
。。。 。。。
npm install webpack -g #安装
安装:
命令行常用参数:
--colors #让webpack的输出结果带彩色
--display-modules #显示隐藏的目录
--profile #能看到每一步的耗时
-w #监听状态
npm install webpack-dev-server -g #全局安装一个webpack开发工具
http://127.0.0.1:8080/
开发:
var config = {
entry: {
"deadline": './source/scripts/deadline.js',
"vendors": ['jquery', 'bootstrap.css', 'font-awesome', 'bootstrap.js']
},
output: {
path: __dirname + '/public/assets/',
filename: '[chunkhash:8].[name].js',
chunkFilename: '[name].[chunkhash:8].js'
},
module: {
loaders: [
{
test: path.join(node_modules, 'jquery/dist/jquery.min.js'),
loader: 'expose?jQuery'
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
}
};
webpack.config.js
当入口为单个字符串时,会解析路径并进行打包
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
//为字符串
module.exports = {
entry: ['./main1.js','./main2.js']
output: {
filename: 'bundle.js'
}
};
//为数组
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: ['./main2.js', './main3.js']
},
output: {
filename: '[name].js',
path: __dirname + '/built'
}
};
//为对象
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
//query: {
// presets: ['react', 'es2015']
//}
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
]
}
};
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=10000&name=build/[name].[ext]'
}
webpack中提供了大量的插件来实现各种功能,例如代码的压缩,自动打开浏览器窗口,自动生成html页面,打包公共的代码等等
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
React: 'react',
ReactDom: 'react-dom',
ReactDOM: 'react-dom'
}),
new ExtractTextPlugin("[chunkhash:8].[name].css"),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
var Middleware = require("webpack-dev-middleware");
var webpack = require("webpack");
var compiler = webpack({
// configuration
output: { path: '/' }
});
app.use(Middleware(compiler, {
// options
}));
// webpack dev middleware
//---------------------------
devtool: '#inline-source-map'
//定义是否有source-map和source-map的类型
resolve: {
alias: {
'jquery': 'jquery/dist/jquery.min.js',
'bootstrap.css': 'bootstrap/dist/css/bootstrap.min.css',
'font-awesome': 'font-awesome/css/font-awesome.min.css',
'bootstrap.js': 'bootstrap/dist/js/bootstrap.min.js'
}
}
module: {
noParse: [/moment-with-locales/]
}
webpack --colors --profile --display-modules
//在命令行查看整个打包过程的详细信息
webpack --profile --json > stats.json
//将webpack的打包信息生成json文件,可以配合网站进行解析
线上部署的要求页面所需加载的文件尽可能小,尽可能少
plugins: [ new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})]
//使用插件UglifyJsPlugin
webpack --optimize-minimize
//命令行带参的方式
var config = {
entry: {
"register": "./source/scripts/register.js",
"vendors": ['jquery', 'bootstrap.css', 'react', 'react-dom', 'bootstrap.js']
},
... ...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
React: 'react',
ReactDom: 'react-dom',
ReactDOM: 'react-dom'
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
],
}
... ...
output: {
path: __dirname + '/public/assets/',
filename: '[chunkhash:8].[name].js',
},
... ...
plugins: [
new ExtractTextPlugin("[chunkhash:8].[name].css"),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
})
new HtmlwebpackPlugin({
filename: 'register.html',
minify: {collapseWhitespace: true},
template: __dirname + '/source/' + 'register.html',
inject: true,
chunks: ['register.css', 'vendors', 'register']
})
]