webpack配置之谜一般的操作

头像
tinawang
    阅读 5 分钟
    1

    本文主要介绍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的版本
    image.png
    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中
    image.png
    5.运行dist/index.html，可以看到控制台中打了一下信息：
    image.png
    到此，我们也实现了简单的工程化

    四·安装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部分放在标签里
    image.png

    五·安装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，如果安装成功，就可以看到自动添加了浏览器前缀
    image.png

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

    webpacksaasbabelautoprefixer
    tinawang
    38 声望3 粉丝
    « 上一篇
    实现前后端登录注册界面

    引用和评论

    推荐阅读
    头像
    前端微服务跨域配置解决办法，devServer为例

    smallStone赞 7阅读 6.9k评论 29

    头像
    通过 AST 实现组件库替换升级

    linong赞 1阅读 2.6k

    头像
    开发自定义Taro插件解决跨平台难题

    南玖赞 1阅读 2.4k

    头像
    JS工程化集锦

    specialcoder赞 2阅读 2k

    头像
    macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

    RobinTang阅读 3.4k

    头像
    企业数字化转型与SAP云平台

    注销阅读 2.1k

    头像
    compression-webpack-plugin项目加载优化+nginx配置

    灰太狼的情与殇阅读 1.8k

    0 条评论
    得票最新