商城网站,公司网站的功能,下列关于网站开发中,青岛logo设计上一篇博客讲解了webpack环境的基本#xff0c;这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了 一、插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的#xff1a;Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use… 上一篇博客讲解了webpack环境的基本这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了 一、插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。 举个栗子最新的弹性盒模型flux实际代码 :fullscreen a {display: flex
} 插件自动补充后 a {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex
} 效果显而易见我们可以更专注于css布局和美化而不需要花过多的精力都写相同的外码而加上不同的前缀也减少了冗余代码。 使用方法: cnpm install --save-dev autoprefixer postcss-loader var autoprefixer require(autoprefixer);
module.exports{//其他配置这里就不写了module:{loaders:[{test:/\.css$/,//在原有基础上加上一个postcss的loader就可以了loaders:[style-loader,css-loader,postcss-loader]}]},postcss:[autoprefixer({browsers:[last 2 versions]})]} 2. 自动生成html插件 html-webpack-plugin cnpm install html-webpack-plugin --save-dev //webpack.config.jsvar HtmlWebpackPlugin require(html-webpack-plugin);module.exports{entry:./index.js,output:{path:__dirname/dist,filename:bundle.js}plugins:[new HtmlWebpackPlugin()]} 作用:它会在dist目录下自动生成一个index.html !DOCTYPE html
htmlheadmeta charsetUTF-8titleWebpack App/title/headbodyscript srcbundle.js/script/body
/html 其他配置参数: {entry: index.js,output: {path: dist,filename: bundle.js},plugins: [new HtmlWebpackPlugin({title: My App,filename: admin.html,template:header.html,inject: body,favicon:./images/favico.ico,minify:true,hash:true,cache:false,showErrors:false,chunks: {head: {entry: assets/head_bundle.js,css: [ main.css ]},xhtml:false})]
} --- header.html ---
!DOCTYPE html
htmlheadmeta http-equivContent-type contenttext/html; charsetutf-8/title% htmlWebpackPlugin.options.title %/title/headbody/body
/html 作用 title: 设置title的名字 filename: 设置这个html的文件名 template:要使用的模块的路径 inject: 把模板注入到哪个标签后 body, favicon: 给html添加一个favicon ./images/favico.ico, minify:是否压缩 {...} | false 最新api变动原来是ture|false 感谢onmi指正)hash:是否hash化 true false , cache:是否缓存, showErrors:是否显示错误, chunks:目前没太明白 xhtml:是否自动毕业标签 默认false 3. 提取样式插件 extract-text-webpack-plugin 官网是这么解释的Extract text from bundle into a file.,把额外的数据加到编译好的文件中 var ExtractTextPlugin require(extract-text-webpack-plugin);
module.exports {module: {loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract(style-loader, css-loader) }]},plugins: [new HtmlWebpackPlugin({template: ./src/public/index.html,inject: body}),new ExtractTextPlugin([name].[hash].css)]
} 说明将css放到index.html的body上面 4. 拷贝资源插件 copy-webpack-plugin 官方这样解释 Copy files and directories in webpack,在webpack中拷贝文件和文件夹 cnpm install --save-dev copy-webpack-pluginnew CopyWebpackPlugin([{from: __dirname /src/public
}]), 作用把public 里面的内容全部拷贝到编译目录 参数作用其他说明from定义要拷贝的源目录from: __dirname /src/publicto定义要烤盘膛的目标目录from: __dirname /disttoType file 或者 dir 可选默认是文件force强制覆盖先前的插件可选 默认falsecontext不知道作用可选 默认 base context 可用 specific contextflatten只拷贝文件不管文件夹默认是falseignore忽略拷贝指定的文件可以用模糊匹配5. 全局挂载插件 webpack.ProvidePlugin [webpack内置插件 ] new webpack.ProvidePlugin({$: jquery,jQuery: jquery,window.jQuery: jquery
}))
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin(common.js) 作用: 和上面5个一一对应 当模块使用这些变量的时候,wepback会自动加载。区别于window挂载感谢lihuanghe121指正不显示错误插件查找相等或近似的模块避免在最终生成的文件中出现重复的模块丑化js 混淆代码而用提取公共代码的插件 二、一个完整的栗子 use strict;// Modules
var webpack require(webpack);
var autoprefixer require(autoprefixer);
var HtmlWebpackPlugin require(html-webpack-plugin);
var ExtractTextPlugin require(extract-text-webpack-plugin);
var CopyWebpackPlugin require(copy-webpack-plugin);/*** Env* Get npm lifecycle event to identify the environment*/
var ENV process.env.npm_lifecycle_event;
var isTest ENV test || ENV test-watch;
var isProd ENV build;module.exports function makeWebpackConfig() {var config {};config.entry isTest ? {} : {app: ./src/app/app.js};config.output isTest ? {} : {// Absolute output directorypath: __dirname /dist,publicPath: isProd ? / : http://localhost:8080/,filename: isProd ? [name].[hash].js : [name].bundle.js,chunkFilename: isProd ? [name].[hash].js : [name].bundle.js};if (isTest) {config.devtool inline-source-map;} else if (isProd) {config.devtool source-map;} else {config.devtool eval-source-map;}config.module {preLoaders: [],loaders: [{test: /\.js$/,loader: babel,exclude: /node_modules/}, {test: /\.css/,loader: isTest ? null : ExtractTextPlugin.extract(style, css?sourceMap!postcss)}, {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: file}, {test: /\.json$/,loader: json}, {test: /\.scss/,loader: style!css!sass}, {test: /\.html$/,loader: raw}]};if (isTest) {config.module.preLoaders.push({test: /\.js$/,exclude: [/node_modules/,/\.spec\.js$/],loader: isparta-instrumenter})}config.postcss [autoprefixer({browsers: [last 2 version]})];config.plugins [];if (!isTest) {config.plugins.push(new HtmlWebpackPlugin({template: ./src/public/index.html,inject: body}),new ExtractTextPlugin([name].[hash].css, {disable: !isProd}))}if (isProd) {config.plugins.push(new webpack.NoErrorsPlugin(),new webpack.optimize.DedupePlugin(),new webpack.optimize.UglifyJsPlugin(),new CopyWebpackPlugin([{from: __dirname /src/public}]),new webpack.ProvidePlugin({$: jquery,jQuery: jquery,window.jQuery: jquery}))}config.devServer {contentBase: ./src/public,stats: minimal};return config;
}();三、调试技巧 if (isTest) {config.devtool inline-source-map;
} 作用: 使用source-map可以在debug的时候看到源代码方便 查错
