基础使用
- 安装 npm install webpack -g
- 模块化程序(配置过程忽略此步骤)
cale.js
function add(a,b){
return a + b;
}
module.exports= {addFunc:add};
main.js
var cale = require('./cale.js');
console.log(cale.addFunc(2,3));
复制代码
生产版本配置配置文件
var path = require('path'); //路径处理模块
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js',//打包的源文件(人口文件)
output:{
path:path.resolve(__dirname,'./dist/'),//打包后文件存放的目录
filename:'build.js'//打包后输出的文件名称
},
plugins:[
new htmlWebpackPlugin({
title:'index', //生成页面的标题
filename:'index.html', //生成的文件名称
template:'index.html'//模板文件
})
]
}
复制代码
- 打包css
npm install style-loader css-loader -save-dev
npm install style-loader autoprefixer-loader less-loader -save-dev
-->autoprefixer-loader 自动添加前缀
-----------
添加配置内容
module.exports = {
module:{
webpack1写法:
<!-- loaders:[{
test:/\.css$/,
loader:'style-loader!css-loader!autoPrefixer-loader'
},{
test:/\.less$/,
loader:'style-loader!css-loader!autoPrefixer-loader!less-loader'
}]-->
webpack2写法:
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
}
]
}
}
复制代码
- 打包图片/iconfong
npm install url-loader file-loader --save-dev
-->不修改图片存储方式
{
test:/\.(png|jpg)$/,
loader:'url-loader'
}
-->发布版本图片存储方式修改
{
test:/\.(png|jpg|gif|jpeg)$/, //url的文件后缀可添加修改
use:[
{
loader: 'url-loader',
//小于40k会解析成base64位放入build.js中 //大于40K会由webpack打包成新文件(值不能过大,否则build文件过大影响性能)
options: {
limit: 40000,
name:'[path][name].[ext]'
}
}
]
}
复制代码
- Es6转Es5
//老版本
cnpm install babel-core babel-preset-es2015 babel-plugin-transform-runtime --save-dev
-----------------------------------------------------
开发react需要安装的依赖包
- babel-core 是babel核心包
- babel-preset-es2015 是将es6转化为es5的
- babel-preset-react 是将jsx语法转成js语法的
cnpm install babel-core babel-preset-es2015 babel-preset-react --save-dev
-------------配置文件
{
test:/\.js$/,
loader:'babel-loader',//转换所有js文件中的es6语法为es5语法
exclude:/node_modules/, //排除node_modules文件夹
}
同时需要配置.babelrc文件在根目录
内容如下:
{
"presets": ["es2015"]
}
复制代码
- vue文件转换
npm install vue-loader vue-template-compiler --save-dev
配置如下:
{
test:/\.vue$/,
loader:'vue-loader',
},
复制代码
- vue-preview图片浏览器插件的使用
依赖于babel-loader不需要单独安装依赖包
{
test: /vue-preview.src.*?js$/,//解析vue-preview中特殊格式文件
loader: 'babel-loader'
}
复制代码
- webpack-dev-server
cnpm install webpack webpack-dev-server --save-dev
---> 需要配置package.json简化命令行
"scripts": {
"develop": "webpack-dev-server --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src",
"publish": "webpack --config webpack.publish.config.js"
},
--->命令行就可以直接运行 npm run develop
复制代码
1. 安装 cnpm install webpack webpack-dev-server --save-dev
---> 需要配置package.json简化命令行
"scripts": {
"dev": "webpack-dev-server --config webpack.develop.config.js --inline --hot --open --port 2017",
"publish": "webpack --config webpack.publish.config.js"
},
--->命令行就可以直接运行 npm run develop
----------------------------
+ 特别注意 如果找不到路径可以在package.json 中不加--hot --content-base src那么config配置文件里面就需要加上
devServer:{
contentBase:__dirname + '/src',
hot:true
},
plugins:[
new webpack.HotModuleReplacementPlugin()
]
2. 配置一下选项可实现跨域请求
module.exports = {
devServer:{
proxy:{
'/api/*':{
target:'http://www.guorangongshe.com',
host:'www.guorangongshe.com',
changeOrigin: true,
secure:false
}
}
}
}
复制代码
- 自动生成index文件
//系统会帮我们自动生成一个index文件(为了避免打包后的路径问题)
plugins: [
new htmlWebpackPlugin({
title: 'index', //生成页面的标题
filename: 'index.html',//生成文件的名称
template:'index.html'//根据index.html这个模板来生成(自己生成)
})
],
复制代码
发布版本打包文件
- 1.将生产版本的文件拷贝一份
- 2.抽取css/压缩等
npm install extract-text-webpack-plugin --save-dev
//删除文件夹的插件
var CleanPlugin = require('clean-webpack-plugin');
//抽取css
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
//拷贝文件
var CopyWebpackPlugin = require('copy-webpack-plugin')
//拷贝文件
var CopyWebpackPlugin = require('copy-webpack-plugin')
--->剥离css文件还需要修改配置loader
{
test:/\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback:"style-loader",
use:"css-loader!autoprefixer-loader"
})
},
//系统会帮我们自动生成一个index文件(为了避免打包后的路径问题)
plugins: [
//清除文件夹的插件
new CleanPlugin(['dist']),
//分离第三方应用
new webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'vendors.js'}),
new htmlWebpackPlugin({
template:'index.html',//根据index.html这个模板来生成(自己生成)
htmlWebpackPlugin:{
"files":{
"css":["app.css"],
"js":['vendors.js','bundle.js']
}
},
//html压缩清除注释空格换行等
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
}
}),
//webpack内置插件 -压缩代码
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//拷贝文件
new CopyWebpackPlugin([{
from: __dirname + '/src/statics/data',
to:__dirname +'/dist/src/statics/data'
}]),
//抽离的css的名字
new ExtractTextWebpackPlugin("app.css"),
//删除构建过程中的警告
new webpack.DefinePlugin({
"process.env":{
NODE_ENV:'"production"'
}
})
]
复制代码
-
特别备注:安装包的时候--save-dev是在生产时候需要依赖的包 --save是安装在完成时候运行也需要的包
-
生成環境自动打开浏览器插件
//自动打开浏览器插件
npm install open-browser-webpack-plugin --save-dev
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
---->
配置文件
plugins:[
//自动打开浏览器配置
new OpenBrowserPlugin({
url:"http://localhost:8080/",
browser:"chrome"
})
]
复制代码
- package.json 中配置
- 2017为端口号 IP为本机IP或者localhost或者配置好的域名都行
"scripts": {
"dev": "webpack-dev-server --config webpack/webpack.config.js --progress --colors --port 2017 --host ***.***.***.***. -d",
"publish": "webpack --config webpack.publish.config.js"
}
复制代码