webpack(零工程构建一个前端项目)详解

时间  2019-11-12
标签 webpack 零工 构建 一个 前端 项目 详解 繁體版
原文   原文链接

工做流程记录：javascript

1.初始化项目：npm init -y

2.安装webpack,vue,vue-loader

npm install webpack vue vue-loader

3.按装以后根据警告提示，安装css-loader,vue-template-conpiler依赖包。

npm install css-loader vue-template-compiler

项目初始化基本完成。css

一直遇到提示 install webpack-cli -D,即便安装了也没有用，索性直接删除了，以后可使用。html

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack --config webpack.config.js"
    只有在这里面写webpack他才会调用这里面的webpack,不然会调用全局的webpack,会致使不少版本不一样出错
  },

4.新建webpack.config.js

const path = require("path");//nodejs中的基本包，处理路径的
module.exports = {
    entry: path.join(__dirname,"src/main.js"),//__dirname表明文件所在的目录
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,"dist")
    }
}

5.新建src文件，源代码

src下新建app.vuevue

<template>
    <div id="text">{{text}}</div>
</template>

<script>
export default {
    data() {//数据
        return {
            text: "abc"
        };
    }
}
</script>


<style>

#text{color: red;}
</style>

src下新建main.jsjava

import Vue from "vue";
import App from "./app.vue";//.vue文件
//分别导进来文件

//建立根文件
const root = document.creatElement("div");
document.body.appendChild(root);
new Vue({
    render: (h) => h(App)//经过它挂载到html页面中
}).$mount(root);//挂载到html页面中

6.按须要添加loader

module.exports = {
    entry: path.join(__dirname,"src/main.js"),//__dirname表明文件所在的目录
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,"dist")
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test:/\.styl/,//stylus预处理
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader"//专门处理stylus文件，处理完成以后让css-loader处理css,扔给上一层处理，本身处理本身。比较方面，能够不用写任意的括弧，标点符号。兼容css==== npm install stylus-loader stylus
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: "url-loader",//的安装依赖file-loader
                        options: {
                            limit: 1024,//若是文件小于1024就会把图片转译成base64的代码
                            name: "[name]-aa.[ext]"//指定输出的名字，[name].[ext],原来的名字.扩展名,-aa是自定义的=====以后把相应的loader安装便可。
                        }
                    }
                ]
            }
        ]
    }
}

webpack作的事情就是把不一样的静态资源类型打包成一个js,在html中引用js，在html引用js便可。把零碎的js打包在一块儿减小http请求。使用模块依赖，这样积累，之后的项目能够复用。node

7.在main.js中导入所须要的js,css,图片等模块。

import Vue from "vue";
import App from "./app.vue";//.vue文件
import "./assert/style/style.css";
import "./assert/img/123.jpg";
...

8.配置webpack-dev-server

安装：webpack

npm install webpack-dev-server

安装以后在package.json中设置git

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
}

在webpack.config.js中全局的配置。es6

module.exports = {
    target: "web",//编译目标是web平台
    entry: "..."
}
//判断那个环境
//安装一个cross-env,不一样的平台上运行的环境变量不同。
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",//windows: set NODE_ENV=production
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"//解决热跟新是保存页面屡次插入模板

在webpack.config.js中判断：github

const isDev = process.env.NODE_ENV === "development";//判断是否是develment,在里面设置的环境变量都在process.env这个对象里
const config = {
    target: "web",//编译目标是web平台
    entry: "..."
}
if(isDev) {
    config.devServer = {//给config添加一个对象。server是webpack2.0
        port: "8000",
        host: "0.0.0.0",//能够经过localhost,127.0.0.1,访问，也能够手机测试，其余本机内网也能够访问。
        overlay: {
            errors: true,//编译时出现错误显示
        },
        //热加载hot,须要webpack的HotModuleReplacementPlugin插件
        hot: true//修改了一个组件的代码，至渲染组件的数据，不会整个页面刷新,安装插件
    },
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),//启动这个插件，热加载
        new webpack.NoEmitOnErrorsPlugin()
    ),
    config.devtool = "#cheap-module-eval-source-map"//映射编译后的代码,(.vue,es6代码映射成浏览器识别的代码)
}
module.exports = config;//总体的暴露出去

9.安装html插件

html-webpack-plugin
webpack.config.js中全局引用：

const HTMLPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
//在config对象中添加
plugins: [
    new webpack.DefinePlugin({//自身自带的一个插件
        "process.env": {//判断是哪个环境，开发环境仍是生产环境
            NODE_ENV:isDev ? " 'development' " : " 'production' "//判断环境
        }
    }),
    new HTMLPlugin();//new 就能够了
]

安装postcss-loader autoprefixer babel-loader babel-core

安装以后新建.babelrc,postcss.config.js
postcss.config.js:

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins: [
        autoprefixer()
    ]
}
//后处理css,经过次组建处理css,处理浏览器前缀的等。

babelrc:
安装babel-preset-env babel-plugin-transform-vue-jsx

{
    "presets": [
        "env"
    ],
    "plugins": [
        "transform-vue-jsx"//专门转化vue中的js
    ]
}
//如何使用jxs代码的识别，

在插件中添加rules

{
    test: /\.jsx$/,
    loader: "babel-loader"
}
//须要在css-loader中添加一个对象
{
    "css-loader",
    {
        loader: "postcss-loader",
        options: {
            sourceMap: true
        }
    },//stylus-loader会自动生成sourse map,postcss-loader也会自动生成，这样前面的生成后后面的在不生成，使用效率会很好。使用效率会很好。
    "stylus-loader"
}

.jsx文件

import "../.css";

export default {
    data() {
        return {
            author: "intelwisd"
        }
    },
    render() {
    //可使用一些js业务操做
        return (//返回标签
            <div>{this.author}</div>
        );
    }
}

使用导入组件相同。

webpack正式环境打包的优化

把css单独的打包出来，安装extract-text-webpack-plugin
webpack.config.js:导入使用

const ExtractPlugin = require("extract-text-webpack-plugin");//非js打包成一个静态文件，作浏览器缓存

//根据不一样的环境去添加css 
if(isDev) {//开发时使用styl
    config.module.rules.push({
        test: /\.styl/,
        use:[
            "style-loader",
            "css-loader",
            {
                loader: "postcss-loader",
                options: {
                    sourceMap: true 
                }
            },
            'stylus-loader'
        ]
    });
}else{//线上时使用把css单独打包成静态文件
    config.module.rules.push({
        test: /\.styl/,
        use: ExtractPlugin.extract({
            fallback: "style-loader",
            use: [
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: true
                    }
                },
                "stylus-loader"
            ]
        })
    }),
    config.plugins.push(
        new ExtractPlugin("styles.[contentHash:8].css")
    ),
    config.output.filename = "[name].[chunkhash:8].js"
    //接着处理filename
}
filename: "bundle.[hash:8].js"//默认的

vue-loader会根据每一个组件里面的样式显示的时候才会显示到页面上，好处是使用组件异步加载的时候css跟着异步加载，会省不少流量。

单独打包库代码以致于缓存

else{//线上环境
    config.entry = {//entry路径下添加打包的库文件
        app: path.join(__dirname,"src/index.js"),
        vendor: ["vue","vue-router"]
    },
    config.plugin.push({//利用此插件
        new webpack.optimize.CommonsChunkPlugin({
            name: "vender"//库文件打包成的名字
        }),//这二者是有顺序的
        new webpack.optimize.CommonsChunkPlugin({
            name: "runtime"//webpack相关的文件打包到包度的文件中，好处：有新的模块时，webpack会添加一个新的id上去，就会致使打包时hash发生变化，会阻止浏览器的长缓存。
        })
    })
}

hash和chunkhash

chunkhash: 在entry中生成的不一样的节点,否则打都打包没有意义。线上环境必须用chunkhash。
hash: 全部打包出来的模块都是同一个哈希，整个应用的hash

https://github.com/Wunworld/myWebpack1

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程