自己动手搭建webpack

douzifly 发布于2019-08-22 18:20 / 3523人阅读

摘要：初探从头整理搭建流程主要配置入口配置输出配置文件解析模块配置插件配置目录介绍存放构建配置文件项目开发目录公共静态文件脚本文件样式文件页面文件初始包开发依赖这里使用版本开始搭建在文件夹下面创建，代码如下在文件夹下面创建，任意写几行代码以

wepack初探

从头整理webpack搭建流程

webpack主要配置

entry：入口配置

output：输出配置

module：文件解析模块配置

plugin：插件配置

目录介绍

build/：存放webpack构建配置文件

src/：项目开发目录

public/：公共静态文件

script/：脚本文件

style/：样式文件

view/：页面文件

初始npm包

开发依赖

babel-core

babel-loader

webpack：这里使用webpack3版本

开始搭建

在build/文件夹下面创建webpack.dev.js，代码如下：

const path = require("path")

module.exports = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    }
}

在src/script/文件夹下面创建index.js，任意写几行代码以便测试

在src/view/文件夹下面创建index.html，引入上面的index.js文件

npm init -y或者yarn init -y创建package.json文件，安装开发依赖

在package.json文件中添加scripts属性

"scripts": {
    "dev": "rm -rf dist & webpack --config build/webpack.dev.js"
}

打开终端执行npm run dev命令

引入html-webpack-plugin插件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.export = {
    entry: path.join(__dirname, "../src/script/index.js"),
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            use: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 打包生成html文件名，该文件被放置在输出目录中
            filename: "index.html",
            // 模板文件，以该文件生成打包后的html文件
            template: path.join(__dirname, "../src/view/index.html")
        })
    ]
}

GPU云服务器云服务器自己动手写爬虫自己动手写网路爬虫自己动手写网络爬虫自己动手写开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95752.html

学习从零开始搭建React脚手架

摘要：写在前面准备学习一下和相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步，依赖总览完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了按需加载的地步。写在前面准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 评论0 收藏0
超详细动手搭建一个Vuepress站点及开启PWA与自动部署

摘要：五一之前就想写一篇关于的文章结果朋友结婚就不了了之了。记得最后一定要看注意事项更新仓库介绍官网类似一个极简的静态网站生成器用来写技术文档不能在爽。当然搭建成博客也不成问题。构建与自动部署用的或者的都可以也可以搭建在自己的服务器上。五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。记得最后一定要看注意事项！更新：coding仓库：https://git.dev...

zhoutk 2019-05-29 17:50 评论0 收藏0
webpack+vue项目实战（三，配置功能操作页和组件的按需加载）

摘要：但是实际上，回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了，然后和是按需加载的，就是需要的时候才加载。 1.前言上篇文章（webpack+vue项目实战（二，开发管理系统主页面）），实现了，侧边栏的一个操作，点击侧边栏的一些操作，最重要的就是路由的切换。看了上一篇的伙伴也不难发现，除了点击侧边栏‘首页’之外，点击其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 评论0 收藏0
webpack4详细教程，从无到有搭建react脚手架（一）

摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。 showImg(https://segment...

zhkai 2019-08-23 18:35 评论0 收藏0
multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

xavier 2019-08-02 10:04 评论0 收藏0