资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack初使用

webpack初使用

habren / 347人阅读

摘要：引用网上一作者的话将前端项目当成一项系统工程进行分析组织和构建从而达到项目结构清晰分工明确团队配合默契开发效率提高的目的。提示，是因为缺少这个文件。

前端工程化

在网页比较简单的时代，以文件可以包含 HTML、CSS、JS；到后来结构、样式、行为的分离，文件开始多起来，慢慢的出现了AMD，CMD ，CommonJS，ES6 Module等，技术变化日新月异，把这些技术统一整合起来，就是工程化。
引用网上一作者的话：

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。
node-sass

github地址：node-sass

首先安装node-sass

npm install node-sass

运行命令行，就能将scss文件变成css文件

npx node-sass src/css/style.scss dist/css/style.css

当我scss文件变动，自动更新为css文件

npx node-sass src/css/style.scss -w dist/css/style.css

生成map文件

npx node-sass src/css/style.scss -w dist/css/style.css --source-map true

在这里遇到最大的问题是没有弄清楚全局安装和局部安装，陷入了好久
npm install -g node-sass是全局安装，可以直接使用node-sass
npm install node-sass是局部安装，使用时需要加上相对路径./node_modules/.bin/node-sass；或者使用npx node-sass，npx可以快速找到相对路径。

提示no such file or directory, open "/Users/mac/package.json"，是因为缺少package.json这个文件。

npm WARN saveError ENOENT: no such file or directory, open
"C:Usersfanzm1workspaceAstone115_NodeJSpackage.json"

//首先，初始化项目，一路回车就行
npm init -f

//接着安装依赖
npm install formidable --save
babel

官方网址：babel

首先安装babel

npm install --save-dev babel-cli babel-preset-env

创建一个.babelrc文件，写上

{ "presets": ["env"] }

在创建一个package.json文件，方法：npm init一路回车
打开package.json，添加上内容

{
    "devDependencies": {
          "babel-cli": "^6.0.0"
      }
}

运行下面这句就可以将js文件进行翻译

./node_modules/.bin/babel src/js -d dist/js

当我src/js文件有变动，自动更新为dist/js文件

./node_modules/.bin/babel src/js -d dist/js -wtach
watch-cli

今天其他文件，比如image，html等不需要翻译的文件
地址：watch-cli

安装watch-cli

npm i -g watch-cli

使用，只要文件改动动就会拷贝到dist目录里

watch -p "src/images/**/*" -c "cp -r src/images dist/images"
watch -p "src/index.html" -c "cp src/index.html dist/index.html"

每一种文件都有一个工具，造成每一种文件都需要开一个窗口，导致很乱，这时webpack出现了，把这些整合在一起

webpack

webpack官网：webpack

首先npm init，初始化出一个package.json
安装webpack

npm install --save-dev webpack

运行npx webpack会让你安装package-cli

创建并编辑文件webpack.config.js

const path = require("path");

module.exports = {
    mode: "production",
   entry: "./src/js/app.js",
   output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist/js")
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

app.js引用其他文件

import module1 from "./module-1"
import module2 from "./module-2"

module1()
module2()

被引用的文件

function fn(){
    alert(1)
}
export default fn
/************/
function fn(){
    console.log(2)
}
export default fn

现在可以把 JS 文件拷贝过去，还不能实现翻译

babel webpack

官网：babel-loader

安装

npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack

配置webpack.config.json文件的rules部分

{
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
          plugins: [require("@babel/plugin-proposal-object-rest-spread")]
        }
      }
    }
node-sass webpack

官网：sass-loader
安装

npm install sass-loader node-sass webpack --save-dev

编辑配置webpack.config.json文件的rules部分

{
    test: /.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader",
        options: {
            includePaths: ["absolute/path/a", "absolute/path/b"]
        }
    }]
}

如果报错提示什么安装什么npm install ...。

autoprefixer

github地址：PostCSS Loader
处理 CSS 兼容问题，在属性面前自动加前缀。

安装

npm i -D postcss-loader

编辑文件postcss.config.js

module.exports = {
  //parser: "sugarss",        //可以不要
  plugins: {
    //"postcss-import": {},        //可以不要
    //"postcss-preset-env": {},        //可以不要
      "postcss-cssnext": {}
    //"cssnano": {}        //可以不要
  }
}

编辑文件webpack.config.json文件的rules部分

use: [
    "style-loader",
    { loader: "css-loader", options: { importLoaders: 1 } },  //重点这句
    { loader: "postcss-loader"},    //重点这句
    "sass-loader"
]

如果报错提示什么安装什么npm install ...。

GPU云服务器 云服务器 webpack 使用公用cdn 初长成 小白初 初体验

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

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

相关文章

  • webpack4.0初体验、各版本及parcel性能对比

    摘要：前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示，黄色为版本绿色为我写的配置，跟基本相似，具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下，还是很给力的关于配置方面，应 前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...

    MarvinZhang 评论0 收藏0

  • webpack打包初体验

    摘要：确保在和环境下，如果没有，先安装环境。我的新建一个文件夹，在命令行里进入执行此时，文件夹下多了一个文件。本文仅献给初学的同学，功能强大，想要学好仍需多多学习。 1、确保在node和npm环境下，如果没有，先安装node环境。我的node: showImg(https://segmentfault.com/img/bVbu1T2); 2、新建一个文件夹web，在命令行里进入web,执行 ...

    canopus4u 评论0 收藏0

  • npm + webpack + es6 初体验

    摘要：当然，我们需要先下载配置下载和配置下载下载的加载器下载完了，要去进行配置，配置完的文件如下可以看到，和之前的相比，增加了一个的配置。 准备 下载Node.js和npm 一个命令行工具（我的是git bash）。不是必须的，用自带的命令行也可以。 创建一个文件夹，作为根目录，比如 npm-webpack-es6 这时，你将看到一个空文件夹 开始 命令行打开至根目录 键入 npm i...

    seasonley 评论0 收藏0

  • 一个现代化的webpack工程初建

    摘要：一前言文章介绍了一个现代化的项目的环境是什么样的。其中一个就是引用路径的问题。扩展将单独打包详细介绍见这是一个插件，可以简化创建文件以便为包提供服务。两种环境的配置在中都支持的配置具体的默认配置查询可以移步这里的默认设置。 一 前言 文章介绍了一个现代化的项目的webpack4环境是什么样的。这里只是介绍了基础的功能，如果需要详细的相关只是可以去webpack官网去查阅。代码地址：gi...

    MyFaith 评论0 收藏0

  • webpack+react项目初体验——记录我的webpack环境配置

    摘要：安装写在里安装和配置和之前一样用来处理文件相关的这个包括的就比较多，有，后面两个是为了写和服务。 这两天学习了一些webpack的知识，loaders+plugins真的很强大！不过配置起来也很复杂，看了一些文章，自己也写了项目练手，写下来加深自己的印象。 首先，非常非常推荐的几篇文章，初学者一定要看！http://www.jianshu.com/p/42e1...（标题一点也不夸张，...

    csRyan 评论0 收藏0

发表评论

登陆后可评论

0条评论

habren

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<