zoukankan      html  css  js  c++  java
  • webpack安装配置

    webpack安装

    1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js

    2.全局安装webpack,打开cmd输入npm install webpack -g

    3.cmd cd进入当前目录,输入npm init命令,一直按Enter,然后在当前文件夹会出现package.json文件

    当前目录为webpackTest

    webpack就安装成功了

    webpack的配置

    1.创建项目文件夹,文件夹的名字,不要叫“webpack”,并且不要包含大写字母,路径名不要包含中文

    2.在当前目录下新建webpack.config.js配置文件,名字一定要是这个,不然会出错。因为这是webpack默认执行的文件

    当前文件还有如下文件

    out文件夹:存放出口文件

    src文件夹

    3.webpack.config.js配置文件的参数. 

      • entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
      • output:对应输出项配置 
        • path :入口文件最终要输出到哪里,
        • filename:输出文件的名称
        • publicPath:公共资源路径

     4.在src文件夹下的js文件夹下创建入口文件,我创建的是名为entry的js文件,在项目的根目录下新建index.html文件来试调使用;

    webpack.config.js

    module.exports = {
        entry : './src/js/entry.js',//入口文件
        output : {//输出文件
            filename : 'index.js',//输出文件名
            path : __dirname + '/out'//输出文件路径
        },
    }

     entery.js

    console.log('webpack');

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>ss</title>
    </head>
    <body>
    111
        <script src="./out/index.js"></script>
        <!-- 注意在这里引入的是打包完成的js文件 -->
    </body>
    </html>


     cmd cd 进入当前项目的根目录,即webpackTest文件夹下;输入webpack或者webpack-w命令,查看html文件是否能console.log出"webpack"字符串

     webpack和webpack-w的区别

    webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

  • 相关阅读:
    [gym102832J]Abstract Painting
    [atARC070E]NarrowRectangles
    [atARC070F]HonestOrUnkind
    Cupid's Arrow[HDU1756]
    Surround the Trees[HDU1392]
    TensorFlow-正弦函数拟合
    某新版本不兼容老版本代码的语言的一点基础了解
    TensorFlow安装
    离散快速傅里叶变换
    2016"百度之星"
  • 原文地址:https://www.cnblogs.com/15fj/p/7892387.html
Copyright © 2011-2022 走看看