const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// entry file configuration
// value: object/string
// entry: './src/main.js',
entry: {
//key: is the file name when outputting
// value: is the file path
main: './src/main.js'
},
// output file configuration
output: {
path: __dirname+'/dist',
//[hash:20] Random number. Make sure the names are different to prevent server caching
// filename: '[name].[hash:20].js'
filename: '[name].js'
},
//Dynamic loading script tag
// process the template
cnpm install html-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({
// function file
template: './index.html',
// output file
filename: 'index.html'
})
],
module: {
// Rules for configuration file compilation
rules: [
//compile es6 syntax
Use babel-loader
cnpm install babel-loader babel-core -D
Can only parse basic syntax, methods, and functions cannot be implemented
{
test: /\.js$/,//The matching rule of the file path to be compiled
exclude: /node_modules/, //removed file path
loader: 'babel-loader',
//babel-loader configuration
/*
options: {
//preset
ES6 functions and methods do not compile:
(The es6 used will provide method conversion when compiling, which is suitable for development projects and frameworks)
cnpm install babel-plugin-transform-runtime -D
cnpm install babel-runtime -S
What method is used in the code will insert the es5 method
presets: [
// 'env'
//If the preset is a single configuration, the configuration is an array
// The first value is the default name
// The second value is the default configuration for this
['env', {
target: {
browsers: ['>1%', 'last 2 versions']
}
}]
//react uses the following, others use the above
['env', "react"]
],
plugins: [
"transform-runtime"
]
}
*/
},
Parse vue into js
install vue
cnpm install vue vue-router vuex -S
cnpm install vue-loader -D (after installation, check whether the dependent modules are installed)
{
test: /\.vue$/,
loader: 'vue-loader'
},
//compile css
cnpm install css-loader style-loader -D
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
//Compile other files (png gif jpeg jpg ttf )
url-loader
cnpm install url-loader -D
{
test: /\.(png|jpeg|jpg|ttf|gif)/,
loader: 'url-loader'
}
]
}
}