前端开发之webpack打包简单整理
Posted web前端开发外包服务
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发之webpack打包简单整理相关的知识，希望对你有一定的参考价值。
进行以下操作之前我们默认已经安装了nodejs。
1、首先全局安装webpack:
npm install webpack -g
2、初始化项目：
npm init，生成package.json文件；
3、安装webpack依赖包到项目目录：
npm install webpack - - save-dev；npm install webpack-cli —save-dev
4、安装需要处理的图片css、img、svg、font等：
1)、安装 css - loader样式处理：
npm install --save-dev css-loader style-loader
2)、安装 url - loader 图片(字体)处理：
npm install file-loader url-loader --save-dev；
如果css需要单独打包，则安装以下插件：
npm install extract-text-webpack-plugin --save-dev；
如果自动引用你打包后的JS文件的新index.html，则安装以下插件：
npm install --save-dev html-webpack-plugin
所需要的依赖安装完后，则进入webpack.config.js文件进行配置：
完整的webpack.config.js如下：
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css独立打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html引打包后的js文件
module.exports = {
//js
entry: {
pubJs: __dirname + "/js/main.js",
pubJs2: __dirname + "/js/lib/bootstrap.js",
},//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "js/[name].js",//打包后输出文件的文件名
},
module: {
rules: [
{
test: /\.css$/,
// loader: ExtractTextPlugin.extract("style-loader","css-loader")
// use: [
// 'style-loader',
// 'css-loader'
// ],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|svg|jpg|gif)$/,
// loader: 'file-loader?limit=8192&name=images/[hash:8].[name].[ext]'//独立打包图片到文件夹
use: [
'file-loader?limit=8192&name=images/[hash:8].[name].[ext]'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader?limit=8192&name=fonts/[hash:8].[name].[ext]'//独立打包字体到文件夹
}
]
},
plugins: [
new ExtractTextPlugin("css/styles.css"),//独立打包css到文件夹
new HtmlWebpackPlugin({
title: 'html title',
})
]
}
以上是关于前端开发之webpack打包简单整理的主要内容，如果未能解决你的问题，请参考以下文章