6.webpack configured Vue
Introduced vue.js
- Follow-up project, we will use Vuejs development, but also to organize a special file vue components. So, let's learn how to integrate Vuejs in our webpack environment. Now, we want to use Vuejs in the project, so there are bound to depend on their needs, so you need to install (Note: Because we follow are also used in the actual project vue, it is not dependent upon no hair)
npm install vue --save
- So, the next will be the way we learn to use Vue before the
run index.html
Packaging Project - Error Messages
> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.
■ After editing, repackage, run the program:
- The packaging process without any error (because only a multi-pack - a vue of js files only), but run the program, the desired effect does not occur, and there is an error in the browser
■ This error saying is that we are using a runtime-only version of Vue, what does that mean?
- Construction of different versions of Vue
- runtime-only → code, you may not have any template
- runtime-compiler> tag, there may template, because template compiler can be used to compile
■ Therefore, we modify webpack configuration, add the following to
modify main.js 
[Vue warn]: Cannot find element: #appthis error attention bundle.js introduced position, at the end of the body tag to
complete the steps above error disappears
el template and the difference (a)
■ After normal operation, let us consider another question:
- If we want the data in the data displayed in the interface, it must be modified index.html
- If we are behind custom components, it must be modified to use the component index.html
- However, html template developed after, I do not want to manually change frequently, if you can do it?
■ Define the template properties:
- In the foregoing example Vue. After we define el property for index.html and in #app binding, let Vue instance can manage the content of which it
- Here we can div elements ({message}) content deleted, retaining only a basic div element id
- .? But if I am still where you want the content ({message}) should be how to deal with it
we can then define a template attribute, as follows:
Vue introduction of component-based development
■ When learning component-based development. I said after Vue development process, we will adopt the idea of component-based development.
- So, in the current project, if I would like to take the form of component-based development, how to do it?
■ View the following code:
- Of course, we can extract the following code to a js file and export.
But js code template with no separation, we need to further improve
el template and the difference (b)
■ repackage, run the program, and display the same results HTML code structure
■ So, what is the relationship el template and the template is it?
- In our previous study, we know that e | used to specify the Vue to manage DOM, which can help resolve command, event listeners, and so on.
- And if Vue instance specify the template, then the content template template replaces the template corresponding to swap el mount.
■ doing what good is it?
- After doing so we do not operate index.html again later in the development, only need to write the corresponding label template can be
■ However, writing template module cumbersome how to do it?
- It does not matter, we will later be pulled template content template.
- Writing will be divided into three parts:. Template, script style, structure becomes very clear.
New App.vue folder ( (* ¯ (oo) ¯) : main.js here before that is dependent css files and less, but for a place, pay attention to the rest of the path replacement )
directly npm run build will complain, loader reason we do not have a corresponding installation package vue
.vue file encapsulation process
■ However, when a component is organized and used in the form of a js object it is very inconvenient
- On the one hand it is very troublesome to write template module
- Also - if there are aspects of style, we write where better?
■ Now, we have a new formula to organize the components of a vue
■ However, this time the file can be properly loaded it?
- Not necessarily this particular file format as well as special, someone must help us deal with. . Vue-loader with the Template-and-Compiler VUE
■ mounted vue-loadervue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
■ modify webpack.config.js configuration file:
bug npm RUN Build appear
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in
again npm install-> npm run build
.vue file add a subcomponent
Parent components
npm run build
Allow free import file write .XXX suffix
6.plugin use
Understanding pluigin
What plugin that?
- plugin is a plug-meaning, usually for one of the existing infrastructure expansion.
- webpack the plug-in, is a variety of webpack extend existing functionality, such as packaging optimization, file compression, and so on.
loader and plugin difference
- loader mainly for converting certain types of modules, it is a one converter.
- plugin is a plugin, which is an extension of webpack itself, is - expander.
plugin of course:
- Step one: npm install plugins need to use (some webpack has no need to install a built-in plug)
- Step two: webpack.config.js disposed in the plug-in plugins.
■ Here, we take a look at what plug-packaged existing webpack expansion process can make our webpack become more easy to use.
Add copyright Plugin
■ Let's use a simple plug-in, add a copyright notice for the packaged file
- The plug-in name BannerPlugin, belonging webpack comes with plug-ins.
■ in the following ways to modify webpack.config.js file:
■ repackaged program: View head bundle.js file, see the following information
The packaged plugin html
■ At present, our index.htmI file is stored in the root directory of the project.
- We know that in the real publishing project released the contents of the dist folder, but the dist folder if no index.html file. Js then packaged and other documents would be no meaning.
- So we need to index.htm |. Package file to the dist folder, you can use this time to plug HtmlWebpackPlugin
■ HtmlWebpackPlugin plugin can do these things for us:
- Automatically generates an index.html file (you can specify a template to generate)
- The packaged js file is automatically inserted into the body through the script tag
■ Install the plug-HtmlWebpackPlugin
npm install html-webpack-plugin --save-dev
■ Use plug-in, modify the contents of the file plugins webpack .config.js part as follows:
After you finish modifying the configuration error 
modify html-webpack-plugin version 
npm installupdate node_module package
after the completion index.html packaged dist folder
- Here's representation to generate template index.html depending on what template
- In addition, we need to remove before adding the output of publicPath property
- Or the inserted script tag src may be a problem
js compressed Plugin
■ Before publishing project, we will inevitably need to be processed js-peer file compression
- Here, we are on packed js file compression
- We use a third-party plug-ins uglifyjs-webpack-plugin, and version 1.1.1 is specified, consistent and CL2
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
Successful installation
■ modify webpack.config.js file, use the plug-in:
■ View package bunlde.js file is already compressed before. It is not recommended to use during development.
7. setting up a local server
■ webpack offers an optional local development server, the local server node.js-based structures, internal use express frame, can be achieved
now we want to allow the browser to automatically refresh the display of the results of our changes.
■ but it is a separate module, it needs to be installed prior to use in the webpack
npm install --save-dev webpack-dev-server@2.9.1
■ devserver webpack also as an option in the option itself can set the following properties:
- contentBase: for which a file folder to provide local service, the default is the root folder, we are here to fill ./dist
- port: port number
- inline: Real-time refresh the page
- historyApiFallback: In the SPA pages, depending HTML5 mode of history
■ webpack.config.js configuration file is modified as follows:
■ We can then configure additional scripts:
- -open parameter represents a direct open the browser
Not once again npm run build run see the results
after that npm run dev
Vue directly modify the contents of the page to refresh
Develop and publish separate file
Fig new folder and three js file
into the trunk
cnpm install webpack-merge --save-dev
base.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/main.js',//入口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 13000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
],
},
resolve: {
extensions: ['.js', '.css', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new webpack.BannerPlugin('最终版权归aaa所有'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
],
}
dev.config.js
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer:{
contentBase: './dist',
inline:true
}
})
prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
plugins: [
new UglifyjsWebpackPlugin()
],
})
After configuring and then delete dist npm run build
modified to
it
(according to the above finishing microblogging "coderwhy" vue video of course)
