初始化项目
npm init
有空再完善详细步骤。。。
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
// fallback: { // 回调函数,file-loader 可以写在回调里,也可忽略,webpack会自动查找处理
// loader: 'file-loader',
// options: {
// publicPath: './dist/'
// }
// }
}
}]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, // 过滤目录
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
,
{
test: /\.vue$/,
use: ['vue-loader']
}
]
}
,
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js"
}
}
,
plugins: [
new htmlWebpackPlugin({
template: 'index.html'
})
,
new uglifyjsWebpackPlugin()
,
new webpack.BannerPlugin(`
author: 'slongZhang',
email: 'slongzhang@qq.com',
date: '2022-05-04'`)
]
,
devServer: {
contentBase: './dist',
inline: true
}
};
package.json
{
"name": "webpackStudy",
"version": "1.0.0",
"description": "webpack study demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open",
"build-s": "webpack --config ./webpack-config/build.js",
"dev-s": "webpack-dev-server --config ./webpack-config/dev.js --open"
},
"author": "slongzhang",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.21",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"webpack-merge": "^4.1.5"
},
"dependencies": {
"vue": "^2.5.21"
}
}