webpack打包文件的随笔记录
1、引入相关的插件
（1）、CleanWebpackPlugin 此插件可以时时清除相关的历史数据
（2）、HtmlWebpackPlugin 此插件是设置html模板的相关参数
（3）、CopyWebpackPlugin 的作用是在打包文件时将静态文件复制到指定的文件路径，便于html的资源引入
（4）、UglifyJSPlugin 将打包的js文件进行压缩和混淆并输出
2、 module.exports 细节描述
1、devtool: "source-map"：次属性设置是为了产生提供单独的文件，显示行和列
2、mode: 'production'/"development"：开发模式不压缩打包后代码，生产模式压缩打包后代码
3、output：{library: 'TTS'}： 可以在webpack中设置全局的变量便于前端开发的对象调用
3、完整webpack设置
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//混淆代码的插件
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 指明webpack的工作路径
context: __dirname,
// 入口，即从谁开始编译并逐渐添加引用。可以是多个
entry: {
'interface': path.resolve(__dirname, './src/index.ts')
},
output: {
path: path.resolve(__dirname, './dist'),
// 当入口有多个时，filename可以改为[name].js用于定义不同文件构建后的名字
filename: 'threets.js',
filename: '[name].js',
library: 'TTS',
libraryTarget: 'umd'
},
resolve: {
extensions: [".tsx", '.ts', ".js", ".css"]
},
// 模式，development or production
// mode: "development",
// 开发模式不压缩打包后代码，生产模式压缩打包后代码
mode: 'production',
// 生成map，便于调试
//产生单独的文件,显示行和列
devtool: "source-map",
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
},
]
},
resolve: {
extensions: [".web.ts", ".web.js", ".ts", ".js",".es6"],
alias: {
'three-examples': path.join(__dirname, './node_modules/three/examples/js'),
'vue': 'vue/dist/vue.esm.js'
}
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
open: true,
// host: '192.168.1.154',
port: 7000,
disableHostCheck: true
},
plugins: [
// BrowserSyncPluginConfig,
new CleanWebpackPlugin([
path.resolve(__dirname, './dist/**/*.js'),
path.resolve(__dirname, './dist/**/*.map'),
path.resolve(__dirname, './dist/**/*.html'),
path.resolve(__dirname, './dist/**/*.css'),
path.resolve(__dirname, './build/**/*.ts')
]),
new HtmlWebpackPlugin({
title: "测试",
template: "test/index.tmpl.html",// 源模板文件
filename: "./index.html",//路径相对于output.path而言
inject: "head",// 可为bool或者string，head or body
chunks: ["interface"],//和entry对应，需要注入的块
}),
//复制静态的js文件到指定的位置
new CopyWebpackPlugin([{
from: 'toolbar/**/*',
to: '',
toType: 'dir'
}]),
//混淆js文件的代码
new UglifyJSPlugin({
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句，可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
},
output: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
},
test: /interface/i,
}),
]
}
小结：
webpack的设置并不复杂，网上有很多相应的资料可以查阅，但是在配置过程中也因人而异，根据自己的具体需求来配置；但是对于初学者来说操作起来还是有一定的难度的，但是不要着急一步一步的慢慢操作，多测试几次你就知道了。以上的简单随笔希望能给大家带来一些帮助。。。。。
网友评论