精华内容
下载资源
问答
  • webpack打包步骤

    千次阅读 2018-09-18 11:48:32
    webpack打包步骤: Webpack 是一个前端资源加载/打包工具。 为什么不手动的复制粘贴,合并文件? web业务越来越复杂和多元,所以目前讲究前端工程化。 前端工程化的主要目标是解放生产力、提高生产效率。 1.安装...

    webpack打包步骤:

    Webpack 是一个前端资源加载/打包工具。

    为什么不手动的复制粘贴,合并文件?

    web业务越来越复杂和多元,所以目前讲究前端工程化。
    前端工程化的主要目标是解放生产力、提高生产效率。

    1.安装node环境

    NodeJS 下载地址:http://nodejs.cn/download/

    NodeJS 安装成功之后,⾃自带 NPM 命令,NPM 指包管理理⼯工具,指在
    https://www.npmjs.com/ ⽹网站中上传、下载、管理理我们的 modules-模块

    在命令行中使用

    node -v 查看node版本 
    npm -v 查看npm版本
    

    推荐使用淘宝镜像:npm install cnpm -g --registry=http://registry.npm.taobao.org

    首先进入命令行

    window 系统:点击开始 -> 运行 -> cmd -> 回车 /win+r+cmd

    mac 系统:终端

    2.全局安装 webpack 脚⼿手架

    命令行 npm i -g webpack-cli
    

    完整写法 npm install --global webpack-cli
    i 表示安装 install
    g 表示全局 global
    webpack-cli 表示webpack脚手架

    进入命令行

    webpack -v
    

    如有提示:webpack不不是内部或外部命令

    npm i -g webpack-cli
    

    再次检查webpack版本

    webpack -v
    

    3.创建项目

    生产环境 :src目录存放js文件
    打包环境 :app目录存放入口文件

    project/
        app/
            index.html  生产环境入口文件
    
        src/
            main.js     打包环境入口文件
            msg.js      模块文件
    

    如上所示 手动的把文件结构和文件都创建出来。

    4.进到项目目录

    命令行:当前项目目录cmd
    命令行:cd至项目目录

    5.局部安装 webpack

    npm i -D webpack
    

    完整写法: npm install --save-dev webpack
    -D 表示开发环境; 完整写法为 --save-dev
    –save 表示生产环境; 安装模块时,不写 -D ,那么缺省值就是指 --save

    此时目录结构为:

            project/
                node_modules/       模块依赖包
                app/
                    index.html      
    
                src/
                    main.js         
                    msg.js
    

    node_modules 这个文件夹是自动生成的,里面保存的是从 npmjs.com 这个网站下载的模块。

    6.初始化项目

    命令行

    npm init
    

    一直回车 yes/no = yes创建webpack.json文件

    project/
        webpack.json        # 该项目的一些相关信息
    

    7.webpack.config.js文件配置

    手动创建webpack.config.js文件

    project/
        webpack.config.js   # webpack配置文件
    

    webpack.config.js 写入如下代码

    module.exports = {
        entry:  __dirname + "/src/main.js",     //入口文件
        output: {
            path: __dirname + "/app",           //打包后的文件存放的地方
            filename: "bundle.js"               //打包后输出文件的文件名
        }
    }
    

    module模块;exports输出;entry入口;output出口;__dirname指项目绝对路径

    8.编写模块与调用

    msg.js文件编写

    module.exports = function(str){
        var div = document.createElement("div");
        div.textContent = str;
        return div;
    }
    

    main.js调用模块

    var msg = require('msg.js');
    document.querySelector('body').appendChild(msg('测试'));
    

    index.html引入打包js文件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>
    <script src="bundle.js"></script>
    

    9.文件打包

    命令行

    webpack
    

    浏览器打开index.html

    10.ES6编译

    我们无法够保证用户的浏览器,都是高版本支持ES6的浏览器,所以在生产环境下的代码,通常都是ES5的代码。

    我们可以在 webpack 下,使用 babel 工具,来完成ES6代码的编译。

    下载相应的模块包

    npm i -D babel-core babel-loader babel-preset-env
    

    一个 npm install 可以下载多个模块,使用空格隔开模块名称即可。

    Loaders

    在执行打包操作的过程中,使用 loader 装载机处理一下我们的数据。

    在 webpack.config.js 文件中,输入代码:

    module.exports = {
        entry:  __dirname + "/src/main.js",
        output: {
            path: __dirname + "/app",
            filename: "bundle.js"
        },
        module: {
            rules: [{
                test: /\.js/,
                use: {
                    loader: "babel-loader",
                    options: {presets: ["env"]}
                },
                exclude: /node_modules/			
            }]
        } 
    }
    

    定义了一个模块规则,如果是 .js 后缀的文件被打包时,使用 loader 处理我们的文件中的数据,把 es6 转为 es5 ,node_modules 文件夹中的 js 文件不被处理。

    11.打包

    在 src/Msg.js 中,写一些 es6 的箭头函数,然后在命令行中执行 webpack。

    单页Web应用(single page web application,SPA),就是只有一张 Web 页面的应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

    12. 多入口的文件打包

    webpack.config.js

    module.exports = {
        entry: {
            "bundle" : __dirname + "/src/main.js",
            "build" : __dirname + "/src/index.js"
        },
        output: {
            path: __dirname + "/app",
            filename: "[name].js"
        },
        module: {
            rules: [{
                test: /\.js/,
                use: {
                    loader: "babel-loader",
                    options: {presets: ["env"]}
                },
                exclude: /node_modules/			
            }]
        } 
    }
    

    以上代码表示,设置了两个入口,一个名字叫做 bundle,一个叫 build,都设置了对应的入口文件。

    打包时->根据这两个入口,会生成两个文件,[name] ->入口名称.在 app 下生成 bundle 和 build 这两个 js 文件。

    13.拖拽模块

    project/
        app/
            index.html
        src/
            index.js
            drag.js
    

    将index.js和drag.js打包成build.js文件
    生产环境下的index.html引入build.js文件

    定义drag拖拽模块

    class Drag{
        constructor(elem){
            this.elem = elem;
            elem.onmousedown = this.down.bind(this);
        }
        down(e){
            [this.x,this.y] = [e.clientX-this.elem.offsetLeft, e.clientY-this.elem.offsetTop];
            document.onmousemove = this.move.bind(this);
            document.onmouseup = this.up;
        }
        move(e){
            [this.elem.style.left,this.elem.style.top] = [e.clientX-this.x+'px', e.clientY-this.y+'px'];
        }
        up(){
            document.onmousemove = document.onmouseup = null;
        }
    }
    module.exports.Drag = Drag;  // 输出模块
    

    index.js调用模块

    const drag = require('./drag.js');//引入模块
    new Drag(document.querySelector('#box'))
    

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            #div1{
                position: absolute;
                width: 100px;
                height: 100px;
                background: red;
            }
            </style>
        </head>
        <body>
            <div id="box">div1</div>
        </body>
    </html>
    <script src="build.js"></script>
    

    命令行进行打包

    webpack
    

    webpack --p 可以进行混淆代码

    webpack 中,我们可以使用 module.exports 来输出一个模块,使用 require 来引入模块

    “./Drag” 实际就是 ./Drag.js ,因为扩展名js可以省略;./表示同目录,不写./的话会先去 node_modules中查找,如果找不到,则去同目录下查找。

    export 和 export default 的区别:

    // 定义模块
    export {a,b};               // 可以输出多个
    // 引入模块
    import {a,b} from "页面";   // 带花括号
    
    // 定义模块
    export default a;           // 只能输出一个
    // 引入模块
    import a from "页面";       // 不带花括号
    

    start 命令

    每次打包文件时,都需要在命令行中输入 webpack,有些命令太长了,我们可以给它做个别名。

    package.json

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --p"
    }
    

    这样我们就可以使用 npm start 命令来执行 webpack --p 了

    npm start 
    

    start 是 npm 中一个特殊的脚本名称,可以直接用 npm start 执行。

    如果是其他命名,需要用 npm run 脚本名称,来执行。

    "scripts" : {
        "test" : "",
        "start" : "webpack --p",
        "abc" : "webpack"
    }
    
    npm start       # 执行的是 webpack --p
    npm run abc     # 执行的是 webpack
    

    本地服务器

    npm i -D webpack-dev-server
    

    webpack.config.js

    module.exports = {
        entry: {...},
        output: {...},
        module: {...},
        devServer: {
            contentBase: "./app",       //本地服务器所加载的页面所在的目录
            historyApiFallback: true,   //不跳转
            inline: true,               //实时刷新
            port: 8800                  //设置端口
        } 
    }
    

    package.json

    {
        "scripts":{
            "server" : "webpack-dev-server --open"
        }
    }
    

    命令行

    npm run server
    

    样式文件的打包

    webpack 也能够把 js 和 css 文件打包在一起。

    我们在 src 目录下,分别建立 1.scss 和 2.css。

    project
        app/
            index.html
        src/
            1.scss
            2.css
            index.js
            Drag.js
    

    上文我们介绍了通过 webpack 把 src 下的 index.js 和 Drag.js 打包在一起。

    现在我们把 src 目录下的 1.scss、2.css、index.js、Drag.js 打包在一起。

    1.scss

    $a : greenyellow;
    $b : 5px;
    body{
        >div{
            background: $a;
            border:{
                radius: $b * 2;
            }
        }
    }
    

    2.css

    body{
    	background: #678;
    }
    
    展开全文
  • Webpack打包步骤

    2021-01-22 11:45:50
    1、配置webpack的自动打包文件 运行npm install webpack-dev-serve -D 命令,安装支持项目打包的工具 修改pakage.json ->scripts中的dev命令如下 "scripts":{ "dev":"webpack-dev-server" //script节点下的脚本...

    配置webpack的自动打包文件

    • 运行npm install webpack-dev-serve -D 命令,安装支持项目打包的工具
    • 修改pakage.json ->scripts中的dev命令如下
    "scripts":{
    "dev":"webpack-dev-server" //script节点下的脚本,可以通过npm run 执行
    
    • 将src ->index.html中,script脚本中的路径,修改为buldle.js“”
    • 运行npm run dev 命令,重新就行打包
    • 在浏览器中访问 http://localhost:8080地址,查看自动打包效果

    得到的页面是跟目录,如果想要把呈现的页面展示出来,需要先配置html-webpack-plugin生成预览页面
    配置html-webpack-plugin生成预览页面

     - 1 运行npm install html-webpack-plugin -D 命令,安装在预览生成页面的插件
     - 2 修改webpack.json.js 头部文件区域,添加如下配置
    导入生成预览页面的插件,得到一个构造函数
    const HtmlWebpackPlugin=require('html-webpack-plugin')
    //创建插件实例对象
    const htmlPlugin =new HtmlWebpackPlugin({ 
    template:'./src/index.html'//指定用到的模板文件 即复制那个模板文件
    filename:'index.html' //指定生成的文件名称,该文件存在于内存中,在目录中不显示
    })
     - 3 修改webpack.config.js 文件中向外暴露的配置对象,新增如下配置节点
     modle.exports={
    plugins:[htmlPlugin] //plugin数组是webpack打包期间会用到的一些插件表
    }
    
    

    需求:点击完页面自动呈现页面 webpack配置自动打包相关的参数

    //package.json中的配置
    //--open打包完成后自动打开浏览器
    //--host配置IP地址
    //--port配置端口
    "scripts"{
    "dev":"webpack-dev-server --open --host:127.0.0.1 --post 8888"
    },
    
    

    webpack加载器
    通过loader打包非js模块
    在实际开发中,webpack默认只能以打包处理以.js后缀名结束的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错。
    loader加载器可以协助webpack打包处理.less先关的文件
    比如 less-loader可以打包.less先关的文件
    scss-loader可以打包处理.scss先关的文件
    url-loader可以打包处理css中与url路径相关的文件
    loader的调用过程
    webpack中加载器的基本使用

    打包处理css文件步骤

    
     1. 运行npm i style-loader  css-loader -D 命令,安装处理css文件的loader
     2. 在webpack.config.js的moudle ->rules数组中,添加loader规则如下:
     //所有第三方文件模块匹配规则
     module:{
    	rules:[
    	{text:/\.css$/,use:['style-loader','css-loader']}
    ]
    }
    其中,test表示配置文件类型,use表示对应调用的loader, $代表以css结尾的文件类型
    注意:use数组中指定的loader顺序时固定的   
         多个loader的顺序是从后往前调用
    
    

    打包处理less文件

    
     1. 运行npm i less-loader -D命令
     2. 在webpack。config.js的module ->rules数组中,添加loader规则如下:
     //所以第三方文件模板匹配规则
     moudle:{
     	rules:[{
    	{tets:/\.less$/,use:['style-loader','css-loader','less-loader']}
    }]}
    

    webpack打包scss文件

    
     1. 运行npm i sass-loader node-sass -D 命令
     2. 在webpack.config.js的moudle ->rules数组中,添加loader规则如下:
     	//所有第三方文件模块匹配规则
     	moudle:{
    	rules:[
    		{test://.scss/,use:['style-loader','cass-loader','']}
    	]
    }
    
    

    配置postCSS自动添加css的兼容前缀

    
     1. 运行npm i postcss-loader autoprefixar -D命令
     2. 在项目根目录中创建postcss.config.js,并初始化如下配置:
    
     //导入自动添加前缀的插件
     	const autoprefixer=require('autoprefixer')
     	moudle.export={
    	plugins:[autoprefixer] //挂载插件
    }
     3. 在webpack。config.js的moudle ->rules数组中,修改css的loader的规则如下:
     	moudle:{
     	rules:[
     	{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
     	]
     	}
    
    

    打包样式表中的图片和字体文件

    
     1. 运行npm i  url-loader file-loader -D命令
     2. 在webpack.config.js的moudle- >rules的数组中,添加loader规则如下:
     	moudle:{
     	rules:[
     	{
     	test:/\.jpg|gif|bmp|ttf|eot|svg|woff|woff2$/,
     	use:'url-loader?limit=16940'
     	}
     	]
     	}
     	其中?之后是loader的参数项
     	limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转化为base64图片
    

    打包js文件中的高级语法

    
     1. 安装babal转化器相关的包:
      npm i babel-loader @babel/core @babel/runtime -D
     2.安装babel语法插件相关的包:
     npm i @balel/preset-env @babel/plugin/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
    3.在项目根目录中,创建babel配置文件babel.config.js并初始化基本配置如下:
    	moudle.exports:{
    	presets:['@babel/preset-env'],
    	plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
    	}
    4.在webpack.config.js的moudle ->rules数组中,添加loader规则如下:
    	//exclude为排除项 表示babel-loader不需要处理node-modules中的js文件
    {test:/\.js$/,use:'babel-loader',exclude:/node_moudles/}
    	
    

    webpack中配置vue组件的加载器

    
     1. 运行npm i vue-loader Vue-template-compiler -D命令
     2. 在webpack.config.js配置文件中,添加Vue-loader的配置项如下:
     	const VueLoaderPlugin=require('Vue-loader/lib/plugin')
     	moudle:{
     	rules:[
     	//其他规则
     	{test:/\.Vue$/,loader:'vue-loader'}
     	]
     	},
     	plaugins:[
     	//其他插件
     	new VueLoaderPlugin() //确保引入这个插件
     	]
    

    在webpack项目中使用Vue

    
     1. npm i vue -s  安装vue
     2. 在src -> index.js入口文件中,通过inport Vue form  'Vue' 来导入vue构造函数
     3. 创建vue的实例对象,并要指定控制的el区域
     4. 通过render函数渲染APP根组件
     	//导入vue构造函数
     	import Vue form 'Vue'
     	//导入App根组件
     	import App form './components/App.vue'
    	const vm=new Vue({
     	//指定vm实例要控制的页面区域
     	el:'#app',
     	//通过render函数,把指定的数组渲染到el区域中
     	render: h=>h(App)
    	})
    

    webpack打包发布

    上线之前需要通过webpack将应用进行整体打包,可以通过package.json文件配置打包命令:
    
     - //在package.json文件配置webpack.json打包命令
     - //该命令默认加载项目根目录中的webpack.config.js配置文件
    "script":{
    //用于打包的命令
    "builde":"webpack -p"
    //用于开发调试的命令
    "dev":"webpack-dev-server --open --host 127.0.0.1 --post 3000",
    }
    
    
    展开全文
  • jq项目webpack打包步骤

    千次阅读 2020-04-17 12:45:36
    webpack打包多html传统项目 生成package.json文件 npm init -y 全局安装webpack cnpm install webpack -g 项目中安装,生成node_modules依赖 cnpm install webpack --save-dev cnpm install webpack-cli --save-...

    webpack打包多html传统项目

    
    
    生成package.json文件
    npm init -y
    
    全局安装webpack 
    cnpm install webpack -g
    
    项目中安装,生成node_modules依赖
    cnpm install webpack --save-dev
    cnpm install webpack-cli --save-dev
    
    配置webpack.config.js
    
    打包html需要使用插件
    cnpm install html-webpack-plugin --save-dev//页面打包
    cnpm install html-withimg-loader --save-dev//打包html中img引入的图片
    cnpm install uglifyjs-webpack-plugin --save-dev 打包js插件并压缩
    cnpm install clean-webpack-plugin --save-dev//清除dist中的文件
    cnpm install extract-text-webpack-plugin@next //抽离出来一个独立的css文件
    cnpm install copy-webpack-plugin --save-dev//拷贝文件
    cnpm install style-loader --save-dev//打包样式
    cnpm install optimize-css-assets-webpack-plugin --save-dev
    cnpm install css-loader --save-dev //处理 import / require() @import / url 引入的内容
    cnpm install file-loader --save-dev//打包图片文件
    cnpm install image-webpack-loader --save-dev // 压缩图片
    
    页面插件
    cnpm install jquery --save-dev
    cnpm install swiper --save-dev
    
    编译
    webpack -p 或者 npx webpack 或者webpack
    

    别人git项目以后 执行一下命令:
    npm install 或者cnpm i 淘宝镜像会快点

    package.json

    {
      "name": "caicai",
      "version": "1.0.0",
      "description": "官网",
      "main": "index.js",
      "scripts": {  },
      "repository": {},
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^5.1.1",
        "css-loader": "^3.5.2",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "^6.0.0",
        "html-webpack-plugin": "^4.2.0",
        "html-withimg-loader": "^0.1.16",
        "image-webpack-loader": "^6.0.0",
        "jquery": "^3.5.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "style-loader": "^1.1.3",
        "swiper": "^5.3.7",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "webpack": "^4.42.1",
        "webpack-cli": "^3.3.11"
      },
      "config": {}
    }
    
    

    webpack.config.js

    /**
     * 引入打包所需脚本
     */
    var webpack = require('webpack');
    var path = require('path');
    // 读取文件
    var fs = require("fs");
    
    // 根目录查找html
    var pathName = "./";
    
    // 存放所有html名称的集合
    var htmlFiles = []
    
    // 匹配html文件
    var ipReg = /\.(htm|html)$/i;
    
    // 找到根目录的所有html 除index之外 存在htmlFiles中
    fs.readdirSync(pathName).forEach(files=>{
      if(ipReg.test(files) && files.indexOf('index') < 0){
        htmlFiles.push(files)
      }
    });
    
    // 将所有页面合并到plugins
    function html_plugins() {
        var r = []
        for (var i=0;i<htmlFiles.length;i++){
        var conf={
            favicon: './favicon.ico',   //生成html文件的favicon的路径
            chunks: ['js/bundle','libs/aos'], // 所有子页面都调用这些  不写chunks的话,就是所有js都调用,可以和index写在一起,然后就不用了分开写,然后还判断了
            filename: htmlFiles[i],
            template: htmlFiles[i],
            minify: false
          };
          r.push(new HtmlWebpackPlugin(conf));
        }
        return r
    }
    
    // 打包html的插件
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    
    // 打包js插件
    var uglify = require('uglifyjs-webpack-plugin');
    
    // 用于在构建前清除dist目录中的内容
    var { CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    // 单独打包样式
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    // 压缩css文件
    var OptimizeCssplugin = require('optimize-css-assets-webpack-plugin');
    
    // 拷贝文件
    var CopyWebpackPlugin = require('copy-webpack-plugin');
    
    
    /**
     * 打包配置项
     */
    module.exports = {
        // 和不在source显示webpack一起配置
        devtool: false,
        entry: {
            //打包成多个是为了解决加载顺序导致的bug
            'libs/aos':'./libs/aos/aos.js',// 所有页面调用aos执行动画
            'libs/three.min':'./js/three.min.js',// 只有首页用到了three
            bundle: [// 所有页都用这个
                // 要打包的css样式
                './js/css.js',
                './libs/jquery/jquery.nicescroll.min.js',
                './libs/layui/layui.all.js',
                './js/index.js',
                './js/common.js',
                './js/nav.js'
            ]
        },
    
        output: {
            // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index,
            filename: '[name].js',
            //__dirname 当前webpack.config.js的路径
            path: path.resolve(__dirname, './dist'),
        },
    
        mode: 'development', // 开发模式设置为development,发布时改为production
    
        module: {
            rules: [
                // 样式单独打包
                {
                    test: /\.css/,
                    //ExtractTextPlugin插件的作用是为了不让css被打包到了js文件中,不然浏览器打开index.html,就会发现css以style的形式被插到了head
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                {
                    // 图片
                    test: /\.(png|jpg|gif|svg|webm)$/i,
                    use:[
                        {
                          loader: 'file-loader',
                          options: {
                              // 保持图片名不变,而且也能够添加到指定目录下
                              name: 'images/[name][hash:8].[ext]',
                              publicPath: './',
                              esModule: false
                              // outputPath: './',
                          }
                        },
                        'image-webpack-loader',//压缩图片
                    ]
                },
                {
                    // 页面
                    test: /\.(htm|html)$/i,
                    loader:'html-withimg-loader'
                }
            ]
        },
    
        // 插件
        plugins: [
            // 防止源文件内容包含在源映射中
            new webpack.SourceMapDevToolPlugin({ noSources: false }),
    
            // 打包成单独css
            new ExtractTextPlugin({
                filename:'css/bundle.css',
            }),
    
            // 压缩 css 文件
            new OptimizeCssplugin(),
    
            // 拷贝文件插件
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, 'images/banner.webm'),
                to: path.resolve(__dirname, 'dist/images/banner.webm')
            }]),
    
            // 全局js
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",//Angular 会寻找 window.jQuery 来决定 jQuery 是否存在
                Swiper: ['swiper', 'default']// 这个全局定义 就类似vue一样的定义,这样能解决报Swiper未定义的bug
            }),
    
            // 压缩js代码  这个方法可以不调用了,因为webpack4已经内置了
            // new uglify(),
    
            // 清除dist构建目录文件
            new CleanWebpackPlugin(),
    
            // html页面,可多个
            new HtmlWebpackPlugin({
                title: '123',   //生成html文件的标题
                favicon: './favicon.ico',   //生成html文件的favicon的路径
                // chunks: ['bundle','libs/aos'],
                filename: 'project/index.html',
                template: 'project/index.html',
                minify: false//false 就是不使用html压缩
                /*minify: {
                    removeComment: true,
                    collapseWhitespace: true,
                    removeEmptyAttributes:true
                }*/
            })
        ].concat(html_plugins())
    }
    
    

    常见报错信息:

    1、Unexpected string // 少了逗号,代码不规范
    2、Unexpected identifier// 少了逗号,代码不规范
    3、一大片报错信息的话,那就是少安装了依赖,仔细阅读错误代码,一般错误代码第二行或者第三行,就能看到依赖的名称
    然后cnpm install 名称 --save-dev

    4、cnpm不成功就是你没有安装淘宝镜像,用npm也行
    5、安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
    6、如果img报错那就是图片不存在

    有疑问可以问我
    我这个要是有什么bug 也可以提醒我,谢谢。欢迎指教
    我们的目录结构

    在这里插入图片描述

    展开全文
  • Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理...
  • 简单的webpack打包步骤

    2020-04-03 11:10:50
    /*搭建webpack步骤 * 1.初始化环境 npm init -y * 2.安装webpack npm install webpack webpack-cli -D * 3.创建src目录和配置文件webpack.config.js * 4.进行webpack配置mode、entry、output、plugins等...

    前提是已经安装好node.js 因为webpack就是基于node.js写的
    nodejs中文官网
    webpack官网
    /*搭建webpack步骤
    * 1.初始化环境 npm init -y
    * 2.安装webpack npm install webpack webpack-cli -D
    * 3.创建src目录和配置文件webpack.config.js
    * 4.进行webpack配置mode、entry、output、plugins等
    * 5.打开网页需要配置npm install html-webpack-plugin -D 用于解析html
    * 6.之后还需安装npm install webpack-dev-server -D 用于启动服务
    * 7.引入html-webpack-plugin插件,写入插件即内容
    * 8.配置devServer
    * 9.运行 npm run build 进行打包
    * 10.运行 npm run dev 运行网页
    */
    新建webpack.config.js文件进行配置

    //引入path    是用的nodejs的一个path模块,path模块就是寻找当前目录的一个模块
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
        //模式:开发环境    
        mode: 'development',   //production  不写的话默认为生产模式
        //入口文件   程序从这里开始执行,webpack开始打包
        entry: path.join(__dirname,'src','index.js'),  //__dirname指的是当前目录,是目录形成绝对路径
        output:{
            //输入的文件名
            filename: 'bundle.js',
            //输入的路径  webpack会自动打包生成
            path: path.join(__dirname,'dist')
        },
        plugins: [
            new HtmlWebpackPlugin({
                //文件中找到的路径
                template: path.join(__dirname,'src','index.html'),
                //打包输出的路径
                filename: 'test.html'
            })
        ],
        devServer: {
            //端口
            port: 3000,
            contentBase: path.join(__dirname,'dist')
        },
        module: {
            rules: [
            //引入css插件   npm install --save-dev css-loader
              {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
              },
            ],
        },
    }
    

    package.json文件配置

    {
      "name": "webpack-myself",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-webpack-plugin": "^4.0.4",
        "webpack": "^4.42.1",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
      }
    }
    
    

    文件目录展示
    在这里插入图片描述

    main.js中引入css文件

    console.log('this is index.js')
    import indexcss from '../css/index.css';
    
    展开全文
  • vue+webpack打包步骤

    2019-12-05 17:17:43
    最简单的目录结构如下所示: 新建demo文件夹,作为根目录; 首先npm init ,生成package.json; 局部安装webpack,这时package....webpack就是个.js配置文件,也就是配置webpack.config.js 依次配置入口(Entry)和出...
  • 文章目录前言目标关键字及...2 掌握打包步骤 关键字及命令 export default XXXX npm install --save-dev webpack npm install webpack webpack-cli --save-dev ,,,,, 一、定义 Webpack 是一个前端资源的打包工具
  • vue的webpack打包步骤

    2017-06-05 20:51:00
    vue init webpack my-project : my-project为我自己的项目文件名,下载时一个yes其他都是NO3,在项目中npm install下载相关模块4,得到模块后npm start 启动,然后进入8080端口,默认为vue官方页面,并且自动弹出首页...
  • webpack打包步骤

    2019-05-16 09:54:49
    webpack打包步骤: 1、window + R 弹出一个输入框 在里面输入cmd //这时候会进去一个黑屏界面 2、D: //切换盘符,默认装在C盘里面 ,我的是装在D盘里面 3、cd\webpack\demo //切换到指定的文件夹中,将要在这个文件夹...
  • webpack打包基础步骤

    2019-05-31 08:54:00
    <!-- npm init -y 下载 ...npm i webpack@3.6.0 -S 下载node_modules npm un webpack 卸载 修改文件 package.json "scripts": { "dev": "webpack ./main.js ./build.js" }, 启动 npm run dev --&g...
  • Webpack打包步骤

    2019-08-30 17:19:01
    Webpack打包步骤 1、安装nodejs 2、初始化init文件: npm init -y 直接安装init 不需要一路回车 完成之后出现package.json文件 3、 创建src文件夹 写一个index.html,写上html布局 写需要使用的js方法,...
  • Webpack打包

    2020-11-19 17:10:20
    Webpack打包
  • 这篇文章主要介绍了Vue工程模板文件 webpack打包配置,需要的朋友可以参考下1、githubgithub地址:https://github.com/MengFangui/VueProjectTemplate2、webpack配置(1)基础配置webpack.base.config.jsconst path = ...
  • 主要介绍了详解webpack打包后如何调试的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 文章目录webpack.config.js 配置配置打包的文件的出入口构建一个实时打包 -- webpack-dev-server对html配置 -- html-webpack-plugincss配置 -- loadercss -- 处理字体图标 webpack.config.js 配置 结构目录 ....
  • Webpack详细打包步骤

    2021-03-04 18:01:13
    ----------------------简单打包流程----------------------- 1. 1.安装webpack cnpm install webpack webpack-cli -g; 新建一个src文件,在其目录下新建一个main.js入口文件(如果都已经生成存在则不用管) 2. ...
  • webpack打包配置

    2020-06-02 14:47:29
    webpack打包配置的步骤

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,324
精华内容 4,529
关键字:

webpack打包步骤