webpack配置之谜一般的操作

最新推荐文章于 2024-07-20 20:03:08 发布

weixin_34417635

最新推荐文章于 2024-07-20 20:03:08 发布

阅读量108

点赞数

文章标签： webpack json ViewUI

原文链接：https://segmentfault.com/a/1190000013217269

版权

本文主要介绍MAC上webpack的基础配置操作，有一定的参考意义，感兴趣的同学可以借鉴。
江湖上人称“模块打包机”的webpack可以让我们在日常造轮子的过程更加的便利，例如es5和es6语法的转换，sass文件与css文件的转换，自动处理浏览器前缀等等，webpack让我们的工作变得‘工程化’。接下来我们就来介绍一下这些功能的基础配置。

一·安装webpack

1.首先我们创建一个webpack-demo文件来进行本次教程

mkdir webpack-demo

2.进入webpack官网，参考官网配置教程
3.我们看到有两个安装命令，一个是npm 一个是yarn(任选一个)，这里采用局部安装,在webpack-demo目录下执行下列任意一个命令,安装成功后自动回到webpack-demo目录

npm install --save-dev webpack

yarn add webpack --dev

3.点击官网上的get start，进入配置教程，我们需要在目录里添加以下文件
划重点：这里的src文件下通常存放我们的未编译的代码，dist目录下存放要发布的代码

如果目录里没有package.json，可以通过 npm i这个命令来添加

4.按照以下内容，添加到webpack.config.js文件，这个配置文件会将src/index.js文件编译之后存放到dist/bundle.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

5.我们在index.js文件内输入以下内容作为测试

let a= 0;
console.log(1)

6.执行npx webpack这个命令，因为是局部安装，这个命令会找到本地webpack然后执行，然后打开dist/bundle.js文件。如果看到index.js里添加的语句写到了dist/bundle.js文件，那么恭喜你，webpack安装成功了。

二·babel安装

1.搜索关键字babel-loader，进入官网安装
2.注意：
官网上给出了版本搭配，大家不要安装错误了，这里我选择的是babel6+babel-loader7的版本

3.点击进入babel-loader-7，在weback-demo目录下执行以下命令：

npm install --save-dev babel-loader babel-core babel-preset-env webpack

4.添加配置，添加到webpack.config.js文件中

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

5.执行npx webpack,打开bundle.js文件，我们看到

let a = 0; ===翻译成了===> var a =0;

恭喜你，babel也配置成功了。

三·文件工程化

1.为了真正的实现工程化，我们先修改一下目录结构：
在src文件下创建js文件夹，添加app.js module-1.js module-2.js三个文件，同时也修改一下webpack配置文件，将./src/js/app.js编译后的bundle.js放到dist/js目录下。

const path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js')
  }
};

2.编辑js文件：
mdule-1.js和mdule-2.js文件在这里作为两个函数文件，供给app.js调用
首先编辑一下mdule-1.js文件:

function fn(){
console.log(1)
}
export default fn//默认访问文件时传出fn函数

mdule-2.js文件:

function fn(){
console.log(1)
}
export default fn

app.js文件：

import fn1 from './module-1'
import fn2 from './module-2'
fn1()
console.log('hello webpack')
fn2()

3.编辑html文件：
src/index.html:同时将这个html文件拷贝到dist目录下

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<p>hello webpack</p>
<script src="./js/bundle.js"></script>
<!-- 模块化 -->
</body>

</html>

4.执行npx webpack，可以看到三个js文件都被编译到了bundle.js中

5.运行dist/index.html，可以看到控制台中打了一下信息：

到此，我们也实现了简单的工程化

四·安装sass

1.首先我们需要添加scss文件，存放到src/css目录下

touch src/css/main.scss

2.搜索sass-loader，点击进入官网
3.根据官网配置进行安装

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

划重点：但是官网有时候也是不靠谱的呀，我们还需要安装以下几个脚本，不信的话你试试，会报错的哦

npm i style-loader css-loader

4.添加配置到webpack.config.js

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

5../css/main.scss中添加样式

body{
  background: #dddddd;
p{
  color: red;
}
}

6.在app.js上添加css导入

import '../css/main.scss'

7.执行npx webpack,打开dist/index.html，可以看到样式生效了
scss文件被翻译成css语法后会在页面自动添加style标签，将css部分放在标签里

五·安装autoprefixer

1.首先我们在scss文件中添加：

display:flex;

2.搜索postcss-loader，点击进入官网
3.按照官网的配置安装

npm i -D postcss-loader

3.配置文件到postcss.config.js
注意：我们需要新增一个postcss.config.js文件，然后进行配置

module.exports = {
  plugins: {
    'postcss-cssnext': {},
  }
}

4.配置文件到webpack.config.js

 module: {
    rules: [
.......
  {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader", // translates CSS into CommonJS
                    options: { importLoaders: 1 }在sass文件的配置处添加
                }, {
                    loader: 'postcss-loader' // 在sass文件的配置处添加
                },{
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            }
]
}

5.运行npx webpack，遇到一个报错

Cannot find module 'extract-text-webpack-plugin'

不要紧张，我们根据提示来安装脚本

npm i extract-text-webpack-plugin

这时候还会遇到一个报错

Cannot find module 'postcss-cssnext'

套路，安装脚本

npm i postcss-cssnext

安装结束后，我们再次运行npx webpack，这个时候就没有任何报错了

6.打开dist/index.html，如果安装成功，就可以看到自动添加了浏览器前缀

附上本次配置的demo
以上是本次的webpack配置教程，如果在安装过程中有问题欢迎留言。

weixin_34417635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack配置之谜一般的操作

本文主要介绍MAC上webpack的基础配置操作，有一定的参考意义，感兴趣的同学可以借鉴。江湖上人称“模块打包机”的webpack可以让我们在日常造轮子的过程更加的便利，例如es5和es6语法的转换，sass文件与css文件的转换，自动处理浏览器前缀等等，webpack让我们的工作变得‘工程化’。接下来我们就来介绍一下这些功能的基础配置。...
复制链接

扫一扫