美文网首页
.webpack4.x 配置篇

.webpack4.x 配置篇

作者: 不曾滑落的忧伤 | 来源:发表于2018-09-14 23:34 被阅读0次

    webpack 是一个打包工具,进行代码分割,模块通过loader处理各种文件,模块打包器,按需加载,使初始化加载时间更短,适合大型项目。模块热更新

    1.先初始化package.json ,执行 npm init

    2.安装对应的模块加载,css-loader,vue-loader等

    3.新建文件夹,放文件

    4.新建app.vue 组件

    5.新建入口文件,index.js

    6.新建webpack.config.js

    <pre>

    <code>

    const path = require(''path);

    const isDev = process.env.NODE_ENV === 'development';

    const config = {

      target:'web',

      enrty:path.join(__dirname, 'src/index.js'),

      output: {

      filename:'bundle.js',

      path: path.join(__dirname,'dist')

      },

      module: {

        rules: [

        {

        test: /\.vue$/,

        loader:'vue-loader'

        },

        {

        test: /\.css$/,

        use: [

        'style-loader',

        'css.loader'

        ]

        },

        {

        test: /\.(gif|jpg|jpeg| png|svg)$/,

        use: [

        {

        loader:'url-loader',

        options: {

        limit:1024,

        name: '[name]-xxx.[ext]'

        }

        }

        ]

        }

        ]

      },

      plugins: [

      new webpack.DedinePlugin({

        'process.env': {

        NODE_ENV: isDev ? '"development":"production"'

        }

      }),

      new HTMLplugin()

      ]

    }

    if(isDev) {

    // 用来在页面进行js调试

    config.devtool = '#cheap=module-eval-source-map',

      config.devServer = {

        port: 8000,

        host:'0.0.0.0',

        // 把错误显示在网页上

        overlay: {

        errors: true,

        },

        open: true,

        // 热更新,只改变当前组件的变化,防止其他的信息不见了

        hot: true,

        config.plugins.push(

        new webpack.HotMoudleReplacementPlugin(),

        new webpack.NoEmitOnErrorsPlugin()

        ),

        //做路由配置

        historyFallback: {

        }

      }

    }

    module.exports = config

    </code>

    </pre>

    url-loader 是依赖file-loader 是对file-loader的封装,先读取文件的大小,然后判断大小,把小一点的图片打包在css里面,减少请求的次数。

    7.在package.json里面添加脚本,build:"webpack --config webpack.config.js".之所以在里面添加,是因为外面调用webpack是全局的,而项目里面的版本和外面的可能不一样。

    8. 配置webpack-server ,在package.json 文件里面,先安装cross-env 用来告诉webpack是生产环境还是开发环境,不直接写的原因是不同操作系统的写的方式不一样,如果直接写在里面,要写两个。修改package.json 文件,build: "cross=env" NODE_ENV = production webpack --config webpack.config.js' . dev: cross=env" NODE_ENV = development webpack-dev-server --config webpack.config.js'

    9. 安装html-webpack-plugins .

    ### webpack 4.12 新的不同点。

    ####1.webpack 和webpack-cli分离开了,所以全局安装完webpack 还需要安装webpack-cli。执行webpack a.js b.js 是把a打包成b,但是会报错。CLI(命令行工具)已经转移到了一个单独的包webpack-cli中。

    除了webpack自身外,请额外全局安装webpack-cli来使用CLI。执行npm uninstall webpack-cli

    npm install -g webpack-cli

    ####2配置开发还是生产模式

    <pre>

    <code>

    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

    </code>

    </pre>

    提示我们没有配置webpack的mode选项,默认有production和development两种模式可以设置,因此我们尝试设为development模式,在命令行输入:webpack --mode development.  重新执行,你的项目已经可以成功打包一半了

    ####3.入口文件位置发生变化

    但是会报错如下

    <pre>

    <code>Module not found: Error: Can't resolve 'hello.bundle.js' in '/xdev/webpack/newwebpack'</code>

    </pre>

    意思就是没有找到入口模块。

    也就是说webpack4以上重新调整了打包模块的入口文件位置。这里我是看到别人写的说是调整到src下面了,然后把你的hello.js移动到src下面,并且改成index.js。

    #### 4. 打包方式发生变化

    再次执行。 webpack index.js bundle.js

    会提示can.t resolve相关的错误。

    原因是,webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。 通过配置也可以更改打包文件名,在没有配置的情况下,会直接生成mian.js

    因此我们不再按webpack 文件a 文件b的方式运行webpack指令,而是直接运行

    webpack --mode development

    或者

    webpack --mode production。

    这样便能够实现将'./src/index.js'打包成'./dist/main.js'。

    ####5.将打包指令加入package.json

    不过每次都要输入这个命令,非常麻烦,我们在package.json中scripts中加入两个成员:

    "dev":"webpack --mode development",

    "build":"webpack --mode production"

    以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production。

    我们在根目录执行:

    npm run dev

    可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。

    ####6. 配置webpack 其他打包参数

    在package.json 里面script里加入

    webpack --mode development --watch --progress --display-modules --colors --colors 打包这个模块的原因--display-reasons

    这的意思是,watch监听文件变化,可以自动打包,progerss可以看到打包的进度 display-modules 打包的模块 打包的文字是彩色的 还有打包的原因。

    #### 7. 使用require 引入css文件的时候,需要手动指定用哪些loader进行处理,否则还是会报如下的错误

    <pre><code>ERROR in ./src/assets/css/hello.less 1:10

    Module parse failed: Unexpected token (1:10)

    You may need an appropriate loader to handle this file type.</code></pre>

    意思就是没有找到合适的loader进行css文件的处理,进行修改如下。

    require('css-loader!./assets/css/hello.less')执行npm run dev 显示成功。打开页面,但是页面css并没有生效,想要文件生效,还需要用到style-loader less-loader 这里有个坑哇,一定要注意顺序。如下:require('style-loader!css-loader!less-loader!./assets/css/hello.less')。重新执行,页面运行正常了。

    #### 8.再多页面应用中,可以定义多个入口。

    <pre><code>

    enter:{

    main: '',

    page:''

    },

    output: {

    path:'',

    filename:'[name]-[hash].js'

    }

    </code></pre>

    ####9.解决手动解决文件引入的问题

    安装: cnpm i html-webpack-plugins -save-dev ,我安装的时候,一直报语法错误,找了好久,后来终于发现,是package.json  多了一个,哈哈哈,想抽自己几下。安装后进行配置:  plugins: [

          new HtmlWebpackPlugin({template: 'index.html'})

      ],然后重新执行,就会把index.html 复制一份,到dist目录下,自动引入打包后的文件。 在配置了index为模块后,就出现了另一个问题,那就是直接拷贝了模版的链接,但是显然两个文件的是不一样的。所以这里需要去掉,根目录下index里的引入文件。publicPath:'http://cdn.com',主要用于设置上线地址。以这个绝对路径为开头。

    ####10.配置多个页面html

    复制 new HtmlWebpackPlugin({chunks[a]用于指定当前文件,excludeChunks[a,b]排除法})

    ####11.减少http请求,使性能达到极致。在github上,HtmlWebpackPlugin ,官方为了解决问题的demo:    script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()

      <%=

    compilation.assets[HtmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>

    这样写会报错,解决办法还没找到,初步觉得是模版解析的问题。

    ####11.postcss-loader

    这个官网给了几种配置,在webpack里使用要单独写一个配置文件,还有哇,module.exports = {

      // parser: 'sugarss',

      plugins: {

        'postcss-import': {},

        'postcss-cssnext': {},

        'cssnano': {}

      }

    },这个sugarss,居然是个.sss为后缀名的css解析,不能用{},一直报错这个Unnecessary curly bracket,显示是语法错误。

    ###没有解决的问题: 1.自动读取外链文件引入 2.image-webpack-loader 无法添加到指定文件夹 3。热更新。

    总结: 1、webpack-cli必须要全局安装,否则不能使用webpack指令;

    2、webpack也必须要全局安装,否则也不能使用webpack指令。

    3、webpack4.x中webpack.config.js这样的配置文件不是必须的。

    4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。

    相关文章

      网友评论

          本文标题:.webpack4.x 配置篇

          本文链接:https://www.haomeiwen.com/subject/pfzagftx.html