Configuration of Webpack 4 packaged vue files
what else do you need to configure besides vue-loader, to package vue files with webpack 4 without using vue-cli?
the .vue file is still not recognized by using the webpack configuration under the webpack-simple template in vue-cli. What is the problem
module:{
rules:[
{
test:/\.vue$/,
use:"vue-loader"
}
]
}
the following are all the configuration items for webpack in the current project
const webpack=require("webpack");
module.exports={
entry:__dirname+"/src/main.js",
output: {
path:__dirname+"/public",
filename:"bundle.js"
},
devtool: "none",
devServer: {
contentBase:"./public",
host:"localhost",
port:"8080",
inline:true,
historyApiFallback:true
},
module:{
rules:[
{
test:/\.js$/,
use:"babel-loader",
exclude: /node_modules/
},
{
test:/\.css$/,
use:["style-loader","css-loader"],
exclude: /node_modules/
},
{
test:/\.styl$/,
use:["style-loader","css-loader","stylus-loader"],
exclude: /node_modules/
},
{
test:/\.vue$/,
loader:"vue-loader
}
]
}
}
in the version of vue-loader V 15, you need to add the corresponding plug-in to webpack.config.js. The specific measures are as follows:
1. Introduce a plug-in into the header of webpack.config.js:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
2. Add plug-ins to the exported configuration:
module.export = {
... //
plugins: [
new VueLoaderPlugin()
]
}
read the vuejs website-tutorials-install-Command Line tools
ide/installation.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.
carefully
The
official website has explained that there are many different Vue.js builds in the dist/ directory of the NPM package.
which build you use depends on the way you introduce vue. I introduced vue using the ES6 specification, even if I imported the vue module using import syntax, so I need to set the build of vue to vue.esm.js.
if you introduce vue, using the commonjs specification, even if you import the vue module using require syntax, you need to set the build of vue to vue.commonjs.js.
const webpack=require('webpack');
module.exports={
entry:__dirname+'/src/main.js',
output: {
path:__dirname+'/public',
filename:'bundle.js'
},
devtool: "none",
devServer: {
contentBase:'./public',
host:'localhost',
port:'8080',
inline:true,
historyApiFallback:true
},
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude: /node_modules/
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
exclude: /node_modules/
},
{
test:/\.vue$/,
use:'vue-loader'
}
]
},
//
resolve: {
alias: {
//vue
'vue$':'vue/dist/vue.esm.js'
},
extensions: ['*','.js','.vue','.json']
}
}
* * introduction to resolve.alias
resolve.alias configuration items use aliases to map the original import path to a new import path. For example, use the following configuration:
// Webpack alias
resolve:{
alias:{
components: './src/components/'
}
}
when you import through import Button from 'components/button', it is actually replaced by alias equivalent to import Button from'. / src/components/button'.
the meaning of the alias configuration above is to replace the components keyword in the import statement with. / src/components/.
alias also supports the $symbol to narrow it down to hit only import statements that end with keywords:
resolve:{
alias:{
'react$': '/path/to/react.min.js'
}
}
react$ will only hit the import statement that ends in react, that is, it will only replace the import 'react' keyword with import' / path/to/react.min.js'.
I have made a sample, for your reference: https://github.com/hzsrc/vue-.
add extensions to webpack parsing configuration:
{
...
resolve: {
extensions: ['.js', '.json', '.vue']
}
}
