自定义配置webpack打包文件

2,936 阅读2分钟

基础使用

  • 安装 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"
}