Webpack (0 project to build a front-end project)

Workflow Record:

1. Initialize project: NPM init-y2. Installing Webpack,vue,vue-loader

npm install webpack vue vue-loader

3. Install the Css-loader,vue-template-conpiler dependent package after pressing and following the warning prompts.

npm install css-loader vue-template-

Basic completion of project initialization.

have been encountering the prompt install webpack-cli-d, even if installed also no use, simply delete directly, then can use.

  "scripts":{    "test":"echo \"Error: no test specified\" && exit 1"    "build":"webpack --config webpack.config.js"    只有在这里面写webpack他才会调用这里面的webpack,否则会调用全局的webpack,会导致很多版本不同出错  },

4. New Webpack.config.js

ConstPath= require("Path");the basic package in//nodejs, which handles the pathModule.exports = {    entry: Path.Join(__dirname,"Src/main.js"),//__dirname represents the directory where the file resides    Output: {        filename: "Bundle.js",        Path: Path.Join(__dirname,"Dist")}}

5. New src file, source code

New App.vue under SRC

<template>    <div id="text">{{text}}</div></template><script>export default {    data() {//数据        return {            text: "abc"        };    }}</script><style>#text{color: red;}</style>

New Main.js under SRC

ImportVue from "Vue";ImportApp from "./app.vue";//.vue File//Enter documents separately//Create root fileConstRoot= Document.createlement("Div");Document.Body.appendchild(Root);New Vue({    Render:(h)= h(APP)//Mount it to an HTML page via it}).$mount(Root);//Mount to HTML page

6. Add Loader as needed

Module.exports = {    entry: Path.Join(__dirname,"Src/main.js"),//__dirname represents the directory where the file resides    Output: {        filename: "Bundle.js",        Path: Path.Join(__dirname,"Dist")},    Module: {        rules:[{                Test: /\.Vue$/,                Loader: "Vue-loader"            },            {                Test:/\.styl/,//stylus pretreatment                 Use:["Style-loader",                    "Css-loader",                    "Stylus-loader"//dedicated to processing stylus files, processing completed after the Css-loader processing CSS, throw to the previous layer of processing, self-processing themselves. In comparison, you can not write arbitrary brackets, punctuation. Compatible with css==== NPM install Stylus-loader Stylus]},            {                Test: /\.CSS$/,                 Use:["Style-loader",                    "Css-loader"]},            {                Test: /\. (gif|jpg|JPEG|PNG|svg)$/,                 Use:[{                        Loader: "Url-loader",//Installation dependent File-loader                        Options: {                            Limit: 1024x768,//If the file is less than 1024, the image will be translated into Base64 code                            name: "[Name]-aa. [ext] "//Specify the name of the output, [name]. [ext], the original name. Extension,-aa is custom ===== after the corresponding loader installed.                         }                    }]}]}}

What Webpack do is to package different static resource types into a JS, in the HTML reference JS, in the HTML reference JS can. Package the fragmented JS together to reduce the HTTP request. The use of module dependencies, such accumulation, future projects can be reused.

7. Import the required js,css, pictures and other modules in Main.js.

importfrom"vue";importfrom"./app.vue";//.vue文件import"./assert/style/style.css";import"./assert/img/123.jpg";...

Webpack (0 project to build a front-end project)