webpack搭建环境步骤

一.初始化

1.创建文件夹

2.npm init  -y

二.安装webpack 和webpack-cli

1.yarn add webpack webpack-cli@3.3.10 -D

(这里指定webpack-cli版本是因为,webpack-cli最新的版本是4.xx测试版,和我的webpack-dev-server发生了冲突,导致dev-sever启动不起来)

三.创建config文件夹做开发环境和生产环境的配置

1.base.config.js

2.dev.config.js

3.pro.config.js

四.创建src目录以及public目录

1.src目录创建根文件main.js,作为webpack的入口文件.创建App.vue文件

2.public目录创建index.html做挂载点

五.webpack基本配置项

步骤五-最后,有在webpack-基础知识文章中详细讲解:https://www.cnblogs.com/liuXiaoDi/p/12245421.html

    - entry

    - output

    - resolve

    - plugins

    - module

六.plugins常用的插件

这几个插件用于包的配置

html-webpack-plugin

clean-webpack-plugin

copy-webpack-plugin

     extract-text-webpack-plugin

下载以上这些

     yarn add html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

七.常用loader

处理js的loader

babel-loader

@babel/core

@babel/preset-env

yarn add babel-loader @babel/core @babel/preset-env -D

根目录下创建.babelrc文件,在该文件内做babel相关loader的配置

处理图片的loader

url-loader

file-loader

yarn add url-loader file-loader -D

处理css的laoder

style-loader:把.css文件以<style>形式引入到html中(传统方式以<link>形式在html中引入css)

css-loader:加载.css文件

node-sass:处理sass

postcss-loader

atutoprefixer

yarn add 以上这些

     yarn add style-loader css-loader sass-loader postcss-loader autoprefixer -D

   

      处理vue单文件组件(如果做vue项目的化,看这里)

        vue-loader

        vue-template-compiler

        yarn add vue-loader vue-template-compiler -D

 

 

八.合并webpack配置项

yarn add webpack-merge -D

九.webpack服务

yarn add webpack-dev-server -D